AngularJS：在鏈接方法中添加到指令的作用域

Question

我有一個指令可以繼承父級作用域，但是我覺得在link方法中擴展父級作用域很不好。

angular.module('someModule', [])
  .directive('myDirective', function () {
    return {
      templateUrl: 'views/my-template.html',
      restrict: 'E',
      replace: true,
      link: function (scope, element, attrs) {
        scope.newModel = ['a'];  // newModel not defined in parent scope
      }
    };
  });

在范圍newModel上定義新模型是否違反AngularJS范圍界定原則？ 我在網上找不到任何批准/不贊成這種行為的示例。 請指教。

Answer 1

請記住，指令是可重用的功能。 如果父對象本身定義了相似的字段，則更改定義了指令的作用域對象可能會導致副作用。 如果您在多個位置和/或頁面中使用該指令，則會發生這種情況。 所以記住這一點。

可以完成的兩個改進是

1. 在指令定義中使用scope:true可以創建子作用域，並且可以將屬性添加到子作用域，但是請記住，仍然沒有任何東西可以阻止您操作父作用域對象。
2. 使用隔離作用域scope:{newModel:'='} ，這不會與父作用域混淆，並且可以實現最大的可重用性，但是必須通過隔離作用域提供對父作用域對象的所有訪問。

Answer 2

您不能在父范圍內更改原始值。

在這種情況下，您可以：

1. 在父級作用域中定義函數（例如setter），它將更改原始值

   $scope.setNewModel = function(newVal) { $scope.newModel = newVal; }

2. 使用$parent.newModel = 'newValue'

對於閱讀https://github.com/angular/angular.js/wiki/Understanding-Scopes很有用

Answer 3

鏈接函數內部的初始化范圍沒有錯。

就個人而言，我將在指令的控制器內初始化作用域-但這是優先選擇的問題。