在基本角度指令中定义隔离范围时无法获得“&”前缀答案

【问题标题】：Cannot get '&' prefix working when defining isolated scope in basic angular directive在基本角度指令中定义隔离范围时无法获得“&”前缀
【发布时间】：2017-08-22 08:07:15
【问题描述】：

我正在学习 Angular 指令，但在隔离范围方面遇到了麻烦。我正在制作一个非常基本的指令/控制器，并且只是尝试通过将范围属性设置为“&”前缀来从指令内的 ng-click 上引发警报。我已经盯着这个看了 45 分钟，看不到我做错了什么，但是点击按钮时什么都没有发生（虽然其他 2 个前缀正在工作）。这是指令/控制器的代码：

(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);
        }
    }
})();

这是 HTML：

<html>
<head>
    <title>Directive Practice</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="mePracticing">
    <h1>HEADER</h1>

    <div ng-controller="practiceController">
        <practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="myDirective.js"></script>
</body>
</html>

app.js 只是我创建模块的一行：

angular.module('mePracticing', []);

如果有人可以就“&”为什么不起作用给我任何提示，我将不胜感激。谢谢！

编辑：我为它制作了一个 JSFiddle：https://jsfiddle.net/hozxz5n4/

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

这是因为当你使用指令时没有一个叫做“显示”的函数，你需要传递声明的函数：

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

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

(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=displayMovie(movie) 属性时，该函数从控制器传递到我的指令，作为一个名为 display 的函数，而在指令内我只需要调用 display?无论哪种方式，这都有效，谢谢！
是的，你明白了！
谢谢。我非常感谢您的帮助。
指令模板不应该有display({movie: movie})吗？

【解决方案2】：

该指令有自己的独立作用域，因此您在practiceController 中引入的displayMovie() 函数永远不会被调用。像这样将函数移动到您的指令中：

function practiceDirective() {
    var directive = {
      restrict: 'AE',
      scope: {
        movie: '=',
        rating: '@',
        display: '&'
      },
      link: function(scope, element, attrs) {
            scope.displayMovie = function(movie) {
                alert("Movie :" + movie);
        }
      },
      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;
}

工作小提琴： https://jsfiddle.net/hozxz5n4/1/

也可以看看this great answer。

【讨论】：