Javascript 无法获取'&'；在基本角度指令中定义隔离范围时使用前缀

我正在研究角度指令，在使用隔离范围时遇到了问题。我正在制作一个非常基本的指令/控制器，并通过将scope属性设置为“&”前缀，尝试在指令内的ng click上抛出警报。我已经盯着它看了45分钟了，看不出我做错了什么，但当点击按钮时什么也没发生（尽管其他两个前缀都在工作）。以下是指令/控制器的代码：

(function() {
    'use strict';
    angular
        .module('mePracticing')
        .directive('practiceDirective', practiceDirective);

    function practiceDirective() {
        var directive = {
            restrict: 'AE',
            scope: {
                movie: '=',
                rating: '@',
                display: '&'
            },
            template: '<div>Movie: {{movie}}</div>' +
                "Enter a movie: <input type ='text' ng-model='movie'>" +
                "<div>Rating: {{rating}}</div>" +
                "<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>"
        };
        return directive;
    }
})();


(function() {
    'use strict';
    angular
        .module('mePracticing')
        .controller('practiceController', practiceController);

    function practiceController($scope) {
        $scope.movie = 'The Big Lebowski';
        $scope.rating = 1000101010;
        $scope.displayMovie = function(movie) {
            alert("Movie :" + movie);
        }
    }
})();

如果有人能告诉我为什么这个“&”不起作用，我会非常感激。谢谢大家!

---

编辑：我为它制作了一个JSFIDLE:

该指令有自己的独立作用域，因此在

practiceController

中引入的

displayMovie（）

函数永远不会被调用。将函数移动到指令，如下所示：

function practiceDirective（）{
var指令={
限制：“AE”，
范围：{
电影：“=”，
评级：“@”，
显示：“&”
},
链接：函数（范围、元素、属性）{
scope.displayMovie=函数（电影）{
警报（“电影：+电影”）；
}
},
模板：“电影：{{Movie}}”+
“输入电影：”+
“评级：{{Rating}}”+
“单击我”
};
返回指令；
}

工作小提琴：

---

另请看一看。

之所以会出现这种情况，是因为当您使用指令时，没有名为“display”的函数，您需要传递声明的函数：

<practice-directive movie="movie" display="displayMovie(movie)" rating="{{rating}}"></practice-directive>

(function() {
  'use strict';
  angular
    .module('mePracticing')
    .directive('practiceDirective', practiceDirective);

  function practiceDirective() {
    var directive = {
      restrict: 'AE',
      scope: {
        movie: '=',
        rating: '@',
        display: '&'
      },
      template: '<div>Movie: {{movie}}</div>' +
        "Enter a movie: <input type ='text' ng-model='movie'>" +
        "<div>Rating: {{rating}}</div>" +
        "<div><button ng-click='display()'>CLICK ME</button></div>"
    };
    return directive;
  }
})();

最后，在指令中，只需调用display prop函数：

<practice-directive movie="movie" display="displayMovie(movie)" rating="{{rating}}"></practice-directive>

(function() {
  'use strict';
  angular
    .module('mePracticing')
    .directive('practiceDirective', practiceDirective);

  function practiceDirective() {
    var directive = {
      restrict: 'AE',
      scope: {
        movie: '=',
        rating: '@',
        display: '&'
      },
      template: '<div>Movie: {{movie}}</div>' +
        "Enter a movie: <input type ='text' ng-model='movie'>" +
        "<div>Rating: {{rating}}</div>" +
        "<div><button ng-click='display()'>CLICK ME</button></div>"
    };
    return directive;
  }
})();

（函数（）{
"严格使用",；
有棱角的
.module（'mePracticing'）
.指令（“实践指导”，实践指导）；
函数practiceDirective（）{
var指令={
限制：“AE”，
范围：{
电影：“=”，
评级：“@”，
显示：“&”
},
模板：“电影：{{Movie}}”+
“输入电影：”+
“评级：{{Rating}}”+
“单击我”
};
返回指令；
}
})();

Ahhh，我想我明白了。当我声明display=displayMovie（movie）属性时，该函数作为一个刚刚调用display的函数从控制器传递到我的指令，在指令中我只需要调用display？不管怎样，这都奏效了，谢谢你！是的，你明白了！非常感谢。我真的很感谢您的帮助。指令模板不应该显示（{movie:movie}）？