如何將值作為ng-init的參數傳遞給指令

Question

頁面加載時，我試圖傳遞值列表。 但是我的ng-init函數甚至沒有觸發。 我的代碼有什么問題。

<li class="tag" ng-repeat="list in displayItems  track by $index"  ng-class="{selected: $index==selectedIndex}"  data-ng-init="display(selecteditemslist,searchid)">
                <span class="tag-label">{{list}}</span><span class="tag-cross pointer" ng-click="Delete($index,selecteditemslist[$index],list,searchid)">x</span>
            </li>

到控制器中的功能

$scope.display=function(list,searchid){
                console.clear();
                console.info(list);
                console.info(searchid);

                switch(searchid) {

                    case 'organisation' :
for(var i=0; i<list.length; i++){
                        getOrg(list[i]).fetch({}).$promise.then(
                            function (value) {
                                $scope.displayItem = value.data[0];
                                console.clear();
                                console.info($scope.displayItem);
                                $scope.displayItems.push($scope.displayItem.displayConfig[0].propertyValue);
                                //$scope.displayItems = $scope.displayItem.displayConfig[0].propertyValue;
                                console.info($scope.displayItems);
                            });
}
                        break;

                    case 'people' :
                        for(var j=0; j<list.length; j++) {
                            getPeople(list[j]).fetch({}).$promise.then(
                                function (value) {
                                    $scope.displayItem = value.data[0];
                                    console.info($scope.displayItem);
                                    $scope.displayItems.push($scope.displayItem.displayConfig[0].propertyValue);
                                    //$scope.displayItems = $scope.displayItem.displayConfig[0].propertyValue;
                                    console.info($scope.displayItem.displayConfig[0].propertyValue);
                                    console.info($scope.displayItems);
                                });
                        }
                        break;
                }
            }

Answer 1

簡短答案：

<ul data-ng-init="display(selecteditemslist,searchid)">
  <li class="tag" ng-repeat="list in displayItems track by $index"  ng-class="{selected: $index==selectedIndex}">
    <span class="tag-label">{{list}}</span><span class="tag-cross pointer" ng-click="Delete($index,selecteditemslist[$index],list,searchid)">x</span>
  </li>
</ul>

長答案：

讓我們看看ng-repeat指令是如何工作的。

首先：

var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
  var NG_REMOVED = '$$NG_REMOVED';
  var ngRepeatMinErr = minErr('ngRepeat');

  ...

  return {
    restrict: 'A',
    multiElement: true,
    transclude: 'element',
    priority: 1000,
    terminal: true,
    $$tlb: true,
    compile: function ngRepeatCompile($element, $attr) {
      var expression = $attr.ngRepeat;

      ...
      var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);

      var lhs = match[1];
  var rhs = match[2]; <--- in this case `displayItems`
  var aliasAs = match[3];
  var trackByExp = match[4];

此后$scope.$watchCollection(rhs, function ngRepeatAction(collection) { ... })正在制作中ngRepeatLink 。

結果，如果displayItems為空，我們將得到html注釋： <!-- ngRepeat: list in displayItems -->而不是您可能會看到的內容： <div ng-repeat="list in displayItems" ng-init="display(selecteditemslist,searchid)"> 。

這就是ng-init不初始化的原因:)