我在控制器中使用指令。控制器中的输入字段定义了一个变量,当用户键入时,该变量将更新。
此变量也会解析为指令。但是该指令将被调用一次。当变量在控制器中更改时,更新指令内变量的最佳方法是什么?
在你的指令集中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>
演示普伦克 点击这里