AngularJS指令从控制器属性访问(AngularJS directives attribute

我试图访问控制器功能的指令的属性。然而，我访问它的时候，它是不明确的。我注意到，如果我做一个简单的定时器它的工作原理。是否只有指令后，它的作用域准备并设置为可用于执行代码的方法吗？

我做了一个拨弄它。请确保您的控制台打开。 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;

所述连接和所述控制器的功能的内部。这只会最初的工作，因为没有2way-数据绑定。您可以使用$ attrs.observe虽然。

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

Answer 2:

在一个孤立的范围，局部范围的属性与定义的“@”不能在连接功能来访问。正如@remigio已经提到的，这种局部范围的属性undefined在这一点上。 $ ATTRS。$观察（）或$范围。$表（）必须用于异步获取（插值）的值。

如果您在属性传递一个恒定值，（即不需要插值，即属性的值不包含任何{{}} S）有没有必要“@”或$观察员或$观看。您可以使用$ ATTRS。一次作为@hugo建议，或者如果你是传递一个数字或一个布尔值，并要得到正确的类型，你可以用$范围。$的eval（$ 一次。

如果你使用“=”到本地作用域属性数据绑定到父作用域属性，属性的值将在逻辑函数可用（无需$观察或$观看或$ EVAL）。

Answer 3:

由于角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
    };
});

角1.3引入了一个新的属性称为bindToController指令定义对象，这不正是它说。当与分离的范围使用controllerAs一个指令设置为真，该组件的属性绑定到控制器，而不是范围。这意味着，角可以确保，当控制器被实例化，分离的范围绑定的初始值可在此，和未来的变化也自动可用。

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
    }]
    };
});

Answer 5:

在那一刻范围内的变量是不确定的链接功能是$消化循环之前调用。看看本章及本等，以了解如何链接功能操作。你只使用链接功能来定义手表和/或行为的指令，而不是操纵模式，这是在控制器完成。

Answer 6:

如果您正在访问您的指令，这个值使用指令在视图中插入你可以使用$编译API和做这样的事情访问这个属性

var string = "<div> " + scope.text + "</div>";
$compile(string)(scope, function(cloned, scope){
       element.append(cloned);
});

文章来源: AngularJS directives attributes access from the controller