angularjs - 从指令更新 Controller 范围

Question

我正在使用 AngularJS 指令创建可重用的 UI 组件。我想要一个 Controller ，其中包含我的业务逻辑和嵌套组件(指令)。我希望指令能够操纵 Controller 范围内的单个属性。这些指令需要有一个隔离作用域，因为我可能会多次使用同一个指令，并且每个实例都需要绑定(bind)到特定的 Controller 作用域属性。

到目前为止，我可以将更改应用回 Controller 范围的唯一方法是调用 scope.$apply()从指令。但是，当我由于 rootScope:inprog (正在进行的范围操作)错误而处于 ng-click 回调中时，这会中断。

所以我的问题 :当子指令更新 Controller 范围内的值时，让我的 Controller 知道的最佳方法是什么？

我考虑过在 Controller 上有一个函数，指令可以调用它来进行更新，但这对我来说似乎很重。

这是我在 ng-click 回调中中断的代码。请记住，我不只是想解决 ng-click 问题。我想要最好的整体解决方案来应用可重用指令来修改父范围/模型。

html

<div ng-controller="myCtrl">
    <my-directive value="val1"></my-directive>
</div>

Controller

...
.controller('myCtrl', ['$scope', function ($scope) {
    $scope.val1 = 'something';
}});

指令

...
.directive('myDirective', [function () {

return {
    link: function(scope) {
        scope.buttonClick = function () {
            var val = 'new value';
            scope.value = val;
            scope.$apply(); 
        };
    },
    scope: {
        value: '='
    },
    template: '<button ng-click="buttonClick()"></button>'
};
}]);

Answer 1

指令中双向数据绑定(bind)的目的正是您要问的——“[允许]指令修改父范围/模型”。

首先，仔细检查您是否在指令属性上正确设置了双向数据绑定(bind)，该指令属性公开了您要在作用域之间共享的变量。在 Controller 中，可以使用$watch如果您需要在值更改时执行某些操作，则检测更新。此外，您可以选择将事件处理程序属性添加到指令中。这允许指令在发生某些事情时调用函数。这是一个例子:

<div ng-controller="myCtrl">
    <my-directive value="val1" on-val-change="myFunc"> <!-- Added on-change binding -->
        <button ng-click="buttonClick()"></button>
    </my-directive>
</div>