从指令更新控制器范围

Question

我正在使用AngularJS指令创建可重用的UI组件.我想有一个控制器,其中包含我的业务逻辑与嵌套组件(指令).我希望指令能够操作控制器范围上的单个属性.指令需要有一个隔离范围,因为我可能会多次使用同一个指令,并且每个实例都需要绑定到特定的控制器范围属性.

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

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

我已经考虑过在控制器上有一个函数,指令可以调用它来进行更新,但这对我来说似乎很重要.

这是我的代码打破了ng-click回调.请记住,我不只是想解决ng-click问题.我想要最好的整体解决方案来应用可重用指令来修改父作用域/模型.

HTML

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

调节器

...
.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

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

首先，仔细检查您是否已在指令属性上正确设置了双向数据绑定，该属性公开了您想要在作用域之间共享的变量。在控制器中，$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>