AngularJS

Question

我有一个带有控制器的父指令，它在 $scope 上设置了一个方法。

然后，在子指令中，我尝试通过 & 要求该范围方法。

但是，子指令中的 ng-click 不会触发父作用域函数。我做错了吗？

父指令（定义方法的地方）

app.directive('ParentDirective', [
    '$http',
    function($http) {
        return {
            restrict: 'AE',
            template: '' +
                '<div child-directive ' +
                    'list="list" ' +
                '/>' +
            '',
            controller: function ($scope, $http) {

                $scope.setSelected = function (selector) {
                    console.log('hit!', selector);
                }

                $scope.list = [];

            },
            link: function postLink(scope, element, attrs) {}
        };
    }
]);

子指令（尝试在 ng-click 上调用父方法，但不起作用）

app.directive('childDirective', [

        '$window',
        function($window) {
            return {
                restrict: 'AE',
                scope: {
                    setSelected: '&',
                    list: '=',
                },
                template: '' +
                    '<ul>' +
                        '<li ng-repeat="person in list" ng-click="setSelected(person)">{{person.uri}}</li>' +
                    '</ul>' +
                '',
                link: function postLink(scope, element, attrs) {
                }
            };
        }
    ]);

我是否将 $scope.setSelected() 从父指令错误地传递给了子指令？

编辑：所以我改变了父模板来分配函数，如下所示：模板：'' + '' + '',

这将触发函数，但参数不会从子指令传递。如何让子指令将参数传递给父指令函数？

Answer 1

ParentDirective 有错字应该是：parentDirective

在 parentDirective 模板中，您应该传递函数 'list="list" ' + 'set-selected="setSelected(person)"'

试试这个：

html:

<parent-directive ></parent-directive>

js:

app.directive('parentDirective', [
    '$http',
    function($http) {
        return {
            restrict: 'AE',
            template: '' +
                '<div child-directive ' +
                    'list="list" ' + 'set-selected="setSelected(person)"'+
                '/>' +
            '',
            controller: function ($scope, $http) {

                $scope.setSelected = function (selector) {
                    console.log('hit!', selector);
                }

                $scope.list = [];

            },
            link: function postLink(scope, element, attrs) {}
        };
    }
])
  app.directive('childDirective', [

        '$window',
        function($window) {
            return {
                restrict: 'AE',
                scope: {
                    setSelected: '&',
                    list: '=',
                },
                template: '' +
                    '<ul>' +
                        '<li ng-repeat="person in list" ng-click="setSelected({person:person})">{{person.uri}}</li>' +
                    '</ul>' +
                '',
                link: function postLink(scope, element, attrs) {

                }
            };
        }
    ]);

工作 plunker：

https://plnkr.co/edit/KUWZ9bYbhnbumFwIgcIX?p=preview

AngularJS - 通过“&”将函数绑定到隔离范围，而不是在 ng-click 上触发

AngularJS - binding a function to an isolate scope via '&', not firing on ng-click

angularjs-directive

angularjs-scope

isolate-scope