Question

我正在阅读a very interesting resource，我偶然发现了这段代码：

angular
    .module('app')
    .directive('myExample', myExample);

function myExample() {
    var directive = {
        restrict: 'EA',
        templateUrl: 'app/feature/example.directive.html',
        scope: {
            max: '='
        },
        link: linkFunc,
        controller: ExampleController,
        controllerAs: 'vm',
        bindToController: true // because the scope is isolated
    };
    return directive;

    function linkFunc(scope, el, attr, ctrl) {
        console.log('LINK: scope.min = %s *** should be undefined', scope.min);
        console.log('LINK: scope.max = %s *** should be undefined', scope.max);
        console.log('LINK: scope.vm.min = %s', scope.vm.min);
        console.log('LINK: scope.vm.max = %s', scope.vm.max);
    }
}

ExampleController.$inject = ['$scope'];

function ExampleController($scope) {
    // Injecting $scope just for comparison
    var vm = this;
    vm.min = 3;
    console.log('CTRL: $scope.vm.min = %s', $scope.vm.min);
    console.log('CTRL: $scope.vm.max = %s', $scope.vm.max);
    console.log('CTRL: vm.min = %s', vm.min);
    console.log('CTRL: vm.max = %s', vm.max);
}

我最大的好奇心是

console.log('LINK: scope.max = %s *** should be undefined', scope.max);

在指令的链接功能中。我不明白为什么scope.max应该undefined。 vm是在控制器中定义的，那么为什么必须在链接函数上通过它访问max属性 - 它直接在指令的隔离范围中定义？它与在指令中使用controller as语法有关吗？

Answer 1

我认为这是bindToController选项，这是重要的一点。它将隔离范围变量绑定到控制器而不是范围。因此，范围上没有max属性，仅在控制器实例上。然后，当您使用$scope时，此控制器实例将分配给controllerAs上的属性，因此，在您的示例中，您会在vm对象上看到$scope作为属性例如，你要在控制台中记录它。

您可以在文档的bindToController部分详细了解$compile：https://docs.angularjs.org/api/ng/service/ $ compile

AngularJS - 使用＆＃34;控制器作为＆＃34;时的访问隔离范围指令中的语法

1 个答案: