AngularJS - 使用指令內的局部變量

Question

我很難理解指令如何工作。我的意思是它看起來像在主指令函數中聲明的局部變量在指令的所有實例之間共享。例如。

// 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

我該怎麼做呢？

Answer 1

init和local變量需要在鏈接函數中聲明，而不是在指令聲明中聲明，它將與所有實例共享。

//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