ng-repeat 中模态指令的 Angularjs 奇怪行为

Question

我有一个想要使用模式窗口编辑的项目列表。 当我单击每个项目的“编辑”按钮时，我构建了一个指令来打开一个模式窗口，将项目本身传递给模式（具有“表单对象”属性）。

但我得到了这种奇怪的行为：

{{formObject}} 总是打印最后一项，而 console.log(scope.formObject) 打印正确的 一个。

这是笨蛋：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');
                });

            }
        }
    }]);