Question

假设我有一个控制器＆amp;像这样的指令：

app.controller('mainController', function($scope) {
    $scope.loading = true;
    $scope.updateTest = function(){
        $scope.loading = false;
    }
}).directive('loading', function() {
    return {
        restrict : 'E',
        transclude: true, // use parent scope
        link : function(scope, element, attrs) {
            scope.$watch('loading', function(ctx) {
                console.log('updating?', ctx)
            });
        }
    }
});

还有一个HTML标记：

<section ng-controller="mainController">
    <loading ng-show="loading">
        loading?
    </loading>
    <button ng-click="updateTest()">Force update</button>
</section>

我只是想知道如何在指令中观看父作用域，我似乎无法使其正常工作！

我正在使用Angular 1.3.16

Answer 1

我建议你像这样使用isolate scope并传递所有变量：

.directive('loading', function() {
  return {
    restrict : 'E',
    scope: {
      ngModel: '='
    },
    transclude: true, // use parent scope
    link : function(scope, element, attrs) {
        scope.$watch('ngModel', function(ctx) {
            console.log('updating?', ctx)
        });
    }
  }
});

Html

<loader ng-model="loading" ng-show="loading">
    loading?
</loader>

Answer 2

如果使用scope：false参数创建一个指令，它将使用它的父作用域，这样您就可以访问和操作父作用域内的所有内容。但是你正在使你的指令与父作用域紧密耦合，这是不推荐的。我建议你使用隔离范围并使用参数来执行此操作。通过使用隔离范围，您的指令将可重复使用

这里是如何使用父范围

.directive('loading', function() {
return {
restrict : 'E',
scope: false, // use parent scope
transclude: true,
link : function(scope, element, attrs) {
    scope.$watch('loading', function(ctx) {
        console.log('updating?', ctx)
    });
 }
}
 });

编辑：如注释中提到的@zeroFlogL，不添加范围是angular的默认行为。如果删除范围：来自指令的false部分，它将与范围相同：false

Answer 3

当您在Tek的答案中使用隔离范围时（我也建议），使用您自己的属性名称而不是ngModel可能会更好，这只会导致必须处理的角度开销ngModel指令的编译和链接（控制器）步骤。

不可否认的是，我很有挑剔，但我认为考虑表面下发生的事情是有用的。最后，所有的角色魔法都不是免费的＆＃34;当您使用真正的大数据集并使用ng-repeat生成指令的 n 实例时，根据我的经验，不必要的控制器实例和监视将快速增加性能。

你能更新一个更新它的子范围的控制器吗？

3 个答案: