Question

我在控制器中使用指令。有一个变量被定义为控制器中的输入字段，当用户输入时将对其进行更新。

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

Answer 1

在指令集scope:false

中

Angularjs Doc

（默认值）：不会为该指令创建范围。该指令将使用其父母的范围。

或者在你的指令集scope:true中，确保你了解js继承如何最终掩盖属性

true：将为指令的元素创建一个原型继承自其父级的新子范围。如果同一元素上的多个指令请求新范围，则只创建一个新范围。

Answer 2

基本上，Angular（如果我们谈论1.x版本）总是进行two-way绑定。因此，如果在指令中有以下绑定，则范围属性的更改将始终传播到指令： //内部指令声明范围：{ myVar的：＆＃39; =＆＃39; //等于＆＃39; = myVar＆＃39;。 }

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

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

如果出现这种情况，每次myVar更改时都应更新指令的内部controllerScopeVar。

另一个选择是在指令中共享范围，在这种情况下，指令将继承父控制器的范围。要共享scope，只需从指令的声明中删除scope:{}。

Answer 3

您可以在模型上使用 $ 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>

Demo Plunker Click here

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

3 个答案: