Javascript 您是否可以更新更新它的控制器'；什么是子范围？

假设我有这样一个控制器和指令：

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

我建议您像这样使用隔离作用域并传递所有变量：

.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

加载？

如果您使用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的默认行为。如果您从指令中删除scope:false部分，当您在Tek的回答中使用隔离作用域（我也建议这样做）时，它将与scope:false的工作原理相同，最好使用您自己的属性名称，而不是ngModel，这只会导致angular必须处理

ngModel

指令的编译和链接（控制器）步骤的开销

---

当然，它是挑剔的，但是用棱角加工，我认为考虑表面下面的东西是有用的。最后，所有的角度魔法都不是“免费”的，根据我的经验，当您使用真正的大数据集并使用

ng repeat

生成指令的n个实例时，不必要的控制器实例和手表将很快提高性能。

您是否尝试过使用“$parent.loading”我认为使用$parent在技术上是错误的，因为据我所知，这是一个内部变量，而不是观察者工作时的

角度
方法。问题是什么？默认情况下不创建作用域。这与我的OP完全相同：/
.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)
    });
 }
}
 });