Angularjs ng-repeat內部模態指令的奇怪行爲

Question

我有一個使用模態窗口編輯的項目列表。 我建立了一個指令，當我點擊每個項目的「編輯」按鈕時，將項目本身傳遞給模態（帶有「表格對象」屬性），以打開模態窗口。

但我得到這個奇怪的現象：

{{formObject}}始終打印最後一個項目，而的console.log（scope.formObject）打印正確之一。

這是plunker：http://plnkr.co/edit/N5ta15yctYFgmQPqwXr4

Answer 1

無需這裏compile功能。此作品：

var myAppModule = angular.module('myApp', []); 

    myAppModule.controller('TextController', 
     function($scope) {   
      $scope.userModel = [{id:'1',name:'user1'},{id:'2',name:'user2'},{id:'3',name:'user3'}]; 
     }); 

    myAppModule.directive('formModal', ['$http', '$compile', function($http, $compile) { 
     return { 
      scope: { 
       formObject: '=' 
      }, 
      link: function(scope, element, attrs){ 
       var template, $element, loader; 

       loader = $http.get('modal.html') 
         .success(function(data) { 
          template = data;        
         }); 

       loader.then(function() { 
        $element = angular.element($compile(template)(scope)); 
       }); 

       scope.close = function() { 
        $element.modal('hide'); 
       }; 

       element.on('click', function(e) { 
        e.preventDefault(); 
        $element.modal('show'); 
       }); 

      } 
     } 
    }]);