Question

我无法弄清楚为什么我的指令没有从我的父页面调用我的回调函数。你能帮忙吗？

角度代码：

    angular
        .module('myApp')
        .directive('testDirective', function () {
            return {
                bindToController: {
                    foo: '@',
                    myCallback: '&'
                },
                controller: function () {
                },
                controllerAs: 'vm',
                restrict: 'E',
                replace: true,
                scope: {},
                template: '<div>Foo is: {{ vm.foo }} <button data-ng-click="vm.myCallback()">Click to call Callback</button></div>'
            };
        });

    angular
        .module('myApp')
        .controller('ParentController', function () {
            this.myParentCallback = function () {
                alert('Called the parent callback function');
            };
        });

HTML code：

<body>
    <div data-ng-app="myApp" data-ng-controller="ParentController as ctrl">
        <test-directive foo="bar!" my-callback="ctrl.myParentCallBack"></test-directive>
    </div>
</body>

如您所见，foo绑定正确，但我无法myCallback工作......

思想？

这是plnkr :( http://plnkr.co/edit/niVL5iAeOJ6XTpkpL9fu?p=preview）

Answer 1

这是一个案例问题：在回调中使用小写字母b传递ctrl.myParentCall b 确认。

另外，你的plnkr有一个bug，有vm.myParentCallBack。替换为：

<test-directive foo="bar!" my-callback="ctrl.myParentCallback()"></test-directive>

http://plnkr.co/edit/VnMUekTSZyk5WagsPqkL

Answer 2

您需要在ParentController上实际调用myParentCallBack方法。像这样：

<test-directive foo="bar!" my-callback="ctrl.myParentCallBack()"></test-directive>

这使您可以传递$ event或您想要的内容。

编辑：您还需要更改testDirective定义：

return {
    bindToController: true,
    controller: function () {},
    controllerAs: 'vm',
    restrict: 'E',
    scope: {
        foo: '@',
        myCallback: '&'
    },
    template: '<div>Foo is: {{ vm.foo }} <button data-ng-click="vm.myCallback()">Click to call Callback</button></div>'
};

更改是您只是告诉您要使用bindToController（通过将其指定为true）并使用指令定义的scope属性指定属性。你把它们搞混了。

AngularJS - 使用指令调用回调函数？

2 个答案: