AngularJS - 在指令中使用局部变量答案

【问题标题】：AngularJS - Using local variables inside directiveAngularJS - 在指令中使用局部变量
【发布时间】：2014-09-05 10:43:26
【问题描述】：

我无法理解指令 js 作用域的工作原理。我的意思是它看起来像在主指令函数中声明的局部变量在指令的所有实例之间共享。例如。

// HTML
<ul>
    <li my-dir="1"></li>
    <li my-dir="2"></li>
    <li my-dir="3"></li>
</ul>

//JS
.directive('myDir', function($timeout) {
    var data, _el;
    function init(){
        _el.text(data);
    }
    function link(scope, el, attrs) {
        _el = el;
        data = attrs.myDir;
        $timeout(init,500);
    }
    return {
        restrict: 'A',
        link: link
    };
});

在上面的例子中，我只会得到最后一个元素，因为_el 每次都会被分配一个新元素。在这里，您有上述的 plnkr： http://plnkr.co/edit/NXV6w4MZbROhnZ524wvx?p=preview

我应该怎么做？

【问题讨论】：

标签： angularjs-directive

【解决方案1】：

init 和局部变量需要在链接函数中声明，而不是在指令声明中，它将与所有实例共享。

//JS
app.directive('myDir', function($timeout) {

    function link(scope, el, attrs) {
        var data, _el;

        function init(){
            _el.text(data);
        }

        _el = el;
        data = attrs.myDir;
        $timeout(init,500);
    }
    return {
        restrict: 'A',
        link: link
    };
});

见http://jsbin.com/kosiw/1/edit

【讨论】：