Question

我所知道的

我有一个带隔离范围的自定义指令从＆＃34;外部＆＃34;，我可以使用声明性绑定（通过@和=绑定）将传达给指令。
该指令可以使用声明性绑定（=）或命令性回调（&）将传递给外部。

我想知道

是否有强制性方式将传达给指令？

实施例

说我有<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(){ ... };
        }
    };
});

我可以通过哪些方式实现这种＆＃34;命令式的＆＃34;指令沟通的方法？

Answer 1

据我所知，除非您开始沿着范围层次结构向下走，否则您的父范围将不会知道任何子范围API。但您可以使用事件来做您想做的事情。您可以使用父作用域广播向下作用域层次结构。它确实要求您的孩子/指令的范围监听该事件。

parentScope.$broadcast('eventName', arg1, arg2, arg3)

directiveScope.$on('eventName', function(event, arg1, arg2, arg3){ })

我建议您停止事件的进一步传播。

查看以下链接：

Answer 2

您可以使用与＆＃39;形式使用的技术相同的技术。指令：将指令的控制器暴露给其父作用域。这是一个基本的例子：

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');

    });
});

在Angular中，有没有办法按命令与指令进行通信？

我所知道的

我想知道

实施例

2 个答案: