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

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-models 之间的值共享。但是我希望该指令不会那样做。

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

Answer 1

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

如果你想要父作用域的属性的评估值，使用@绑定(bind)。

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