javascript - 你能更新一个 Controller 来更新它的子范围吗？

Question

假设我有一个这样的 Controller 和指令:

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

我建议你像这样使用隔离范围并将所有变量传递给它:

.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>