獲取在HTML標記中輸入的指令值

Question

In this plunk我試圖在指令中獲取一個數組，其數值在指令聲明中的<li>列表中輸入。

鑑於此指令聲明：

<directive> 
    <ul> 
    <li id="0">xxx 0</li>   
    <li id="1">xxx 1</li>   
    <li id="2">xxx 2</li>   
    </ul> 
</directive> 

數組應該返回是這樣的：

scope.array = [ {id:0, name: "xxx 0"}, {id:1, name: "xxx 1"}, {id:2, name: "xxx 2"} ]; 

這是我嘗試（不工作）：

angular.module('app', []); 

angular.module('app') 
.directive('directive', function() { 
    var directive = {}; 
    directive.restrict = 'AE'; 
    directive.template = "<div>{{array}}</div>"; 
    directive.scope = true; 
    directive.link = function(scope, element, attrs) { 
     scope.array = element.find("ul")[0].children; 
    }; 
    return directive; 

}); 

Answer 1

這裏是更新的plnkr http://plnkr.co/edit/QtNkOGvLMdu3w6BS3tlB?p=preview

您可以在模板中看到預期的數組。

要求JS代碼：

angular.module('app', []); 

angular.module('app') 
.directive('directive', function() { 
    var directive = {}; 
    directive.restrict = 'AE'; 
    directive.scope = true; 
    directive.link = function(scope, element, attrs) { 
     var newArray = []; 
     angular.forEach(element.find('ul')[0].children, function(val) { 
     newArray.push({id: val.id, name: val.innerHTML}); 
     }); 
     scope.array = newArray; 
    }; 
    directive.template = "<div><pre>{{array|json}}</pre><span ng-transclude></span></div>"; 
    directive.transclude = true; 
    return directive; 

});