AngularJS：如何在控制器中访问指令作用域变量？

Hey there! Let's break down how to correctly access the directiveData variable from your directive's scope in the myCtrl controller.

First, let's address why your current code might not work as expected: when the controller initializes, Angular hasn't finished setting up the two-way binding between the parent scope's parentData and the directive's directiveData yet. That means your console.log($scope.directiveData) will likely output undefined right away.

Here are a few reliable ways to fix this:

1. Use $watch to Listen for Variable Changes #

This method works across all AngularJS versions. We'll set up a watcher on directiveData to catch when it gets populated or updated:

app.controller('myCtrl', ['$scope', function($scope) {
    // Watch for changes to directiveData
    $scope.$watch('directiveData', function(newValue, oldValue) {
        // Only proceed if the new value exists
        if (newValue) {
            $scope.newVar = newValue;
            console.log('Directive data loaded:', newValue);
        }
    });
}]);

The watcher will trigger whenever directiveData changes (including when it first gets bound from the parent scope), so you'll always get the latest value.

2. Use controllerAs + $onInit (AngularJS 1.5+) #

If you're using AngularJS 1.5 or later, using the controllerAs syntax with the $onInit hook is a cleaner approach. This hook runs after all directive bindings have been initialized:

First, update your directive definition to enable controllerAs:

app.directive('testDir', function () {
    return {
        restrict: 'E',
        scope: {
            directiveData: '='
        },
        controller: 'myCtrl',
        controllerAs: 'vm', // Alias the controller as 'vm'
        templateUrl: 'view/myView.html'
    };
});

Then modify your controller to use $onInit:

app.controller('myCtrl', function() {
    var vm = this;

    vm.$onInit = function() {
        // By this point, directiveData is fully bound
        vm.newVar = vm.directiveData;
        console.log('Directive data in $onInit:', vm.directiveData);
    };
});

With controllerAs, the directive's scope bindings are automatically attached to the controller instance (this), so you don't need to rely on $scope directly.

3. Use $onChanges for Explicit Binding Updates (AngularJS 1.5+) #

If parentData might change after the initial binding (e.g., loaded asynchronously from an API), the $onChanges hook is perfect. It triggers whenever any bound directive property changes:

app.controller('myCtrl', function() {
    var vm = this;

    vm.$onChanges = function(changes) {
        // Check if directiveData is the property that changed
        if (changes.directiveData) {
            vm.newVar = changes.directiveData.currentValue;
            console.log('Directive data updated:', changes.directiveData.currentValue);
            // You can also access the previous value with changes.directiveData.previousValue
        }
    };
});

This is more targeted than $watch and is the recommended approach for handling binding changes in modern AngularJS components/directives.

内容的提问来源于stack exchange，提问作者T Aria