NG-Repeat内のモーダルウィンドウを使用する

Question

ng-repeatを持ち、同じスコープ変数をモーダルウィンドウに渡すモーダルを追加しようとしています。モーダルウィンドウを開くことができますが、NG-Repeatからのスコープ値はモーダル内部に表示されません。うまくいけば、私のコードはよりよく説明します。これは私がこれまでのものです：

        <div ng-controller="CustomerController">  
        <div ng-repeat="customer in customers">
               <button class="btn btn-default" ng-click="open()">{{ customer.name }}</button>

                <!--MODAL WINDOW--> 
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3>The Customer Name is: {{ customer.name }}</h3>
                    </div>
                    <div class="modal-body">
                            This is where the Customer Details Goes<br />
                            {{ customer.details }}
                    </div>
                    <div class="modal-footer">

                    </div>
                </script>

        </div>  
        </div>

.

コントローラ：

   app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) {
    $scope.customers= customerServices.getCustomers();

    // MODAL WINDOW
    $scope.open = function () {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
             });

    };

});

.

上記はモーダルウィンドウを開きます。ただし、NG-Repeatから{{customer.name}}などの顧客の詳細はモーダルウィンドウに渡されません。コントローラに問題がないことがありますか？

ここでのangular bootrap uiの例を見て、これを作成しようとしています。 http：//角度-ui.github.io/bootstrap/

編集：

これはJSFIDDLEサンプルです。 http://jsfiddle.net/alien_time / 8s9ss / 3 /

Answer 1

あなたのフィドルを更新し、コード以下のコードも更新しました。私はそれが助けることを願っています。

wares

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer)
{
$scope.customer = customer;

});

app.controller('CustomerController', function($scope, $timeout, $modal, $log) {

    $scope.customers = [
        {
        name: 'Ricky',
        details: 'Some Details for Ricky',
        },
        {
        name: 'Dicky',
        details: 'Some Dicky Details',
        },
        {
        name: 'Nicky',
        details: 'Some Nicky Details',
        }
    ];

    // MODAL WINDOW
    $scope.open = function (_customer) {

        var modalInstance = $modal.open({
          controller: "ModalInstanceCtrl",
          templateUrl: 'myModalContent.html',
            resolve: {
                customer: function()
                {
                    return _customer;
                }
            }
             });

    };

});

.

Answer 2

これは、私が繰り返し繰り返して編集したいアイテムをハンドルするための私のモジュールを設定する方法です。私は別のコントローラを操作するように設定することをお勧めします。

$scope.openModal = function(item) 
    // This sets up some of the options I want the modal to open with
    var options = {}
    angular.extend(options, {
      templateUrl: '/views/userItems/form.html',
      controller: 'ItemEditController',
      resolve: {
        // I resolve a copy of the so it dont mess up the original if they cancel
        item: function() { return angular.copy(item); }
      }
    });
    $modal.open(options).result.then(function(updatedItem) {
      // after the user saves the edits to the item it gets passed back in the then function
      if(updatedItem) {
        // this is a service i have to deal with talking to my db
        modelService.editItem(updatedItem).then(function(result) {
          // get the result back, error check then update the scope
          if(result.reason) {
            $scope.addAlert({type: 'error', title: 'Application Error', msg: result.reason});
          } else {
            angular.extend(vital, result);
            $scope.addAlert({type: 'success', msg: 'Successfully updated Item!'}); 
          }
        });
      }
    });
  };

.