angularjs-directive – AngularJS – 在指令中使用局部变量

发布时间：2020-12-17 17:20:18 所属栏目：安全来源：网络整理

导读：我无法理解指令js范围的工作原理.我的意思是看起来主指令函数中声明的局部变量在指令的所有实例之间共享.例如. // HTMLul 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(

我无法理解指令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

我该怎么做呢？

解决方法

init和局部变量需要在link函数中声明,而不是在指令声明中声明,指令声明将与所有实例共享.

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

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

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

        _el = el;
        data = attrs.myDir;
        $timeout(init,link: link
    };
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!