Question

我有一个继承父级范围的指令，但我觉得在链接方法中扩展父范围是不好的。

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

记住指令是可重用的功能。如果父级本身定义了类似的字段，则更改定义了该指令的作用域对象可能会导致副作用。如果您在多个位置和/或页面中使用该指令，则会发生这种情况。所以记住这一点。

可以做的两个改进是

在指令定义中使用scope:true，它可以创建子作用域，并且可以将属性添加到子作用域，但是记住没有什么可以阻止您操作父作用域对象。
使用隔离范围scope:{newModel:'='}，这不会影响父范围，并且您可以实现最大的可重用性，但必须通过隔离范围提供对父范围对象的所有访问。

Answer 2

您无法更改父作用域上的原始值。

在这种情况下，你可以：

在父范围内定义函数，如setter，它将更改基元
的值
$scope.setNewModel = function(newVal) { $scope.newModel = newVal; }
使用$parent.newModel = 'newValue'

，阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

在链接函数中初始化范围没有任何问题。

就个人而言，我会在指令的控制器中初始化范围 - 但这是一个偏好的问题。

AngularJS：在链接方法中添加指令的范围

3 个答案: