在Angular中，是否有一种方法可以强制性地与指令通信？

Scott Rippey 发表于 Dev

斯科特·里皮（Scott Rippey）

我知道的

我有一个带有隔离范围的自定义指令。
从“外部”，我可以使用声明性绑定（通过和绑定）与指令进行通信。该指令可以使用声明性绑定（）或命令性回调（）与外部进行通信。@=
=&

我想知道的

有什么必要的方法与指令通信？

例子

说我有一个<edit-profile>指令。我想公开一个方法reset()，以便该指令的所有者可以（强制）重置该指令。

这是我想做的事情：

<edit-profile on-save="..."></edit-profile>
<button ng-click="editProfile.reset()"> Reset </button>

这是我的指令：

app.directive("editProfile", function() {
    return {
        restrict: "E",
        scope: {
            onSave: "&"
        },
        template: `
            <input type="text">
            <button ng-click="onSave()"> Submit </button>
        `,
        controller: function($scope) {
            $scope.reset = function(){ ... };
        }
    };
});

我可以通过哪些方式来实现这种“命令式”指令传递方法？

JB Nizet

您可以使用与“ form”指令所使用的技术相同的技术：将指令的控制器公开到其父作用域中。这是一个基本示例：

angular.module('directives').directive('foo', function() {
    return {
        scope: {
            name: '='
        },
        controller: function($scope) {
            this.sayHello = function() {
                $scope.hello = 'hello';
            };
            $scope.name = this;
        },
        template: '<div>{{ hello }}</div>'
    };
});

及其单元测试，显示了指令外的链接如何在单击时如何调用指令控制器上的函数：

describe('foo', function() {
    var elm, scope;

    beforeEach(module('directives'));

    beforeEach(inject(function($rootScope, $compile) {
        elm = angular.element(
            '<div><foo name="bar"></foo><a href="" ng-click="bar.sayHello()">say hello</a></div>');

        scope = $rootScope;
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should say hello', function() {
        var a = elm.find('a');
        var div = elm.find('foo');

        expect(div.text()).not.toContain('hello');

        a.triggerHandler('click');

        expect(div.text()).toContain('hello');

    });
});