Question

我有一个带有下一个参数的自定义指令

 return {
        scope: {
            ngModel: '='
        },
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
    // directive code ...
}

和两个使用此指令的模板

//template 1
  <div class="panel-body">
       <div ng-include src="'email.html'"></div>
  </div>

// email.html 
  <div id="template"
       ng-model="emailNotification"
       custom-directive></div>

// template 2
  <div class="panel-body">
       <div ng-include src="'sms.html'"></div>
  </div>

// sms.html 
  <div id="template"
       ng-model="smsNotification"
       custom-directive></div>

当我在这两个模板之间切换时，'custom-directive'中的ng-model不会刷新和估算两个不同ng模型之间的共享。但是，我希望该指令不会这样做。

我的错误在哪里以及为什么指令共享这个变量？

Answer 1

当您使用=运算符时，指令的scope属性将使用相同的名称绑定到父的scope属性。由于您在同一父级内的指令的两个实例上都使用了ng-model，因此它们最终都引用了相同的ng-model。

如果要从父作用域中获取属性的求值，请使用@ binding。

return {
        scope: {
            ngModel: '@'
        },
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
    // directive code ...
}

Answer 2

指令的范围有几种不同的形式。您可以根据您期望的结果使用它们。它们是scope: true，scope: {}，scope: false。

每个范围的行为都不同。您要查找的范围是scope: {}或scope: true。

如果您使用scope: {}，则需要确保其中的元素使用正确的语法=，@和&。在您的情况下，您将需要使用@符号。

符号说明：Explanation

@：将此属性作为字符串传递 =：数据将此属性绑定到指令的父作用域。 &：传入父作用域中的函数，以便稍后调用。用于传递延迟评估的角度表达式。

angularjs在两个模板之间共享自定义指令

2 个答案: