AngularJS指令属性来自控制器的访问

Question

我试图在控制器函数中访问指令的属性.但是,当我访问它时,它是未定义的.我注意到如果我做一个简单的计时器就行了.有没有办法只在指令执行后才能执行代码,并且它的范围已准备好并设置为使用？

我弄了一个小提琴.确保您的控制台已打开.http://jsfiddle.net/paulocoelho/uKA2L/1/

这是我在小提琴中使用的代码:

<div ng-app="testApp" >
    <testcomponent text="hello!"></testcomponent>
</div>

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        controller: function ($scope, $element) {
            console.log($scope.text); // this will return undefined
            setTimeout(function () {
                console.log($scope.text);    // this will return the actual value...
            }, 1000);
        },
        link: function ($scope, $element, $attrs) {
            console.log($scope.text);
            setTimeout(function () {
                console.log($scope.text);
            }, 1000);
        }
    };
});

Answer 1

如果你设置,那么它的作用是什么

scope.text = $attrs.text;

在链接和控制器功能内部.这只能在最初工作,因为没有2路数据绑定.你可以使用$ attrs.observe.

见小提琴:http://jsfiddle.net/JohannesJo/nm3FL/2/

Answer 2

在隔离范围中,无法在链接函数中访问使用"@"定义的本地范围属性.正如@remigio已经提到的那样,这样的本地范围属性就undefined在那时.$ attrs.$ observe()或$ scope.$ watch()必须用于异步获取(插值)值.

如果要在属性中传递常量值(即,不需要插值,即属性的值不包含任何{{}}),则不需要"@"或$ observer或$ watch.你可以使用$ attrs.ATTRIBUTE_NAME一次作为@hugo建议,或者如果你是传递一个数字或一个布尔值,并要得到正确的类型,你可以用$范围.$的eval($ ATTRS.ATTRIBUTE_NAME)一次.

如果使用'='将本地范围属性数据绑定到父范围属性,则该属性的值将在链接函数中可用(无需$ observe或$ watch或$ eval).

Answer 3

从Angular 1.3开始,您就可以使用了bindToController.这是我如何使用它的示例.在这里,我将属性添加到范围,然后bindToController使用它在控制器内部:

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        controller: function () {
            console.log(this.text);
        },
        controllerAs: 'vm',
        bindToController: true
    };
});

Angular 1.3向一个名为bindToController的指令定义对象引入了一个新属性,它正如它所说的那样.在具有使用controllerAs的隔离范围的指令中设置为true时,组件的属性将绑定到控制器而不是范围.这意味着,Angular确保在实例化控制器时,隔离范围绑定的初始值可用于此,并且将来的更改也将自动可用.

Answer 4

而不是使用$scope获取指令属性值,我个人更喜欢使用$attrs该controller函数,或只是attrs在link函数的第三个参数.从controller没有超时的代码中获取属性值时我没有问题:

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
    restrict: 'E',
    template: '<div><p>{{text}} This will run fine! </p></div>',
    scope: {
        text: '@text'
    },
    controller: ['$scope','$attrs', function ($scope, $attrs) {
        console.log($attrs.text); // just call to the $attrs instead $scope and i got the actual value
        $scope.text = $attrs.text; //assign attribute to the scope
    }]
    };
});