Question

我对Angular指令感到羞愧，并且对隔离范围有困难。我正在制作一个非常基本的指令/控制器，只是通过将范围属性设置为'＆amp;'来尝试从指令内的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', []);

如果有人能给我任何关于为什么'＆amp;'的提示不工作我真的很感激。谢谢！

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

Answer 1

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

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

最后在指令中调用display prop function：

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

Answer 2

该指令有自己独立的范围，因此displayMovie()中引入的practiceController函数永远不会被调用。将函数移动到您的指令，如下所示：

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。

不能得到'＆amp;'在基本角度指令

2 个答案: