检测指令中的父控制器变量更改



我在控制器中使用指令。控制器中的输入字段定义了一个变量,当用户键入时,该变量将更新。

此变量也会解析为指令。但是该指令将被调用一次。当变量在控制器中更改时,更新指令内变量的最佳方法是什么?

在你的指令集中scope:false

Angularjs Doc

(默认值(:不会为指令创建任何范围。该指令将使用其父级的作用域。

或者在你的指令集scope:true,确保你了解js继承如何,因为你最终会屏蔽属性

true:将为指令的元素创建一个原型从其父级继承的新子作用域。如果同一元素上的多个指令请求新作用域,则只创建一个新作用域。

基本上,Angular(如果我们谈论的是1.x版本(总是two-way绑定。因此,如果在指令中有以下绑定,则作用域属性的更改将始终传播到指令: 内部指令声明 范围:{ myVar:'='//等于 '=myVar'。 }

并考虑该指令的以下用法:

<input ng-model="controllerScopeVar"/>
<my-directive myVar="controllerScopeVar"></my-directive>

在这种用法的情况下,指令的内部myVar应在每次controllerScopeVar更改时更新。

您的另一个选项是在指令中共享作用域,在这种情况下,指令将继承父控制器的作用域。要共享scope只需从指令的声明中删除scope:{}

您可以通过在模型上使用$watch来检测指令中的父控制器变量更改

让指令像

app.directive('demoDir', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (newVal,oldVal) {
console.log("New value:"+newVal +" and Old was :"+oldVal);
});
}
};
});

.HTML

<body ng-controller="MainCtrl">
<input type="text" ng-model="data" demo-dir>
</body>

演示普伦克 点击这里

最新更新