Angular Transclude - ng-repeat doesn't repeat

Question

Been playing round with Angular directives and came to an issue which I've stumbled upon... Following is the code:

<!DOCTYPE html>
<html>
<head>
    <title>Directive test</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('mainCTRL', function($scope) {});

        app.directive('listItems', function() {
            return {
                restrict : 'E',
                transclude : true, 
                scope : {
                    items : '='
                },
                controller : function($scope) {
                    /**
                    * @param item item being inserted
                    */
                    $scope.addQuestion = function() {
                        //Define the item list (if undefined)
                        if(!$scope.listOfItems) $scope.listOfItems = [];
                        //add the item
                        $scope.listOfItems.push({
                            question : $scope.question
                        }); 

                        console.log($scope.listOfItems);
                    };
                },
                template : '<div>Question: <input type="text" ng-model="question" />' + 
                                '<button ng-click="addQuestion()">Add question</button>' + 
                                '<div><ng-transclude></ng-transclude></div>' +
                            '</div>'
            };
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="mainCTRL">
  <list-items items="listOfItems">
    <div ng-repeat="item in listOfItems track by $index">
        {{item.question}}
    </div>
  </list-items>
</body>
</html>

Objects are successfully pushed to the array, but why on earth they do not repeat?

 <list-items items="listOfItems">
    <div ng-repeat="item in listOfItems track by $index">
        {{item.question}}
    </div>
  </list-items>

Thanks for any assistance.

Could you try specifying `ng-transclude` as `
`, instead of an element of its own and see if anything changes? - Do not forget the closing ``, do not do `
` just to be safe... — Nikos Paraskevopoulos, Oct 20 '14 at 13:54
Tried "
" , result is the same.I can see that all div's are properly closed? — gor181, Oct 20 '14 at 13:57

score 0 · Accepted Answer · answered Oct 20 '14 at 13:58

With:

scope: {
  items : '='
}

you specifiy the name of the scope variable to be items. Yet you use listOfItems in the directives controller. Change that to items and it will work.

(function (app, ng) {
  'use strict';

  app.controller('mainCTRL', function($scope) {});

  app.directive('listItems', function() {
    return {
      restrict : 'E',
      transclude : true,
      scope : {
        items : '='
      },
      controller : function($scope) {
        /**
         * @param item item being inserted
         */
        $scope.addQuestion = function() {
          //Define the item list (if undefined)
          if(!$scope.items) $scope.items = [];
          //add the item
          $scope.items.push({
            question : $scope.question
          });

          console.log($scope.items);
        };
      },
      template : '<div>Question: <input type="text" ng-model="question" />' +
                 '<button ng-click="addQuestion()">Add question</button>' +
                 '<div><ng-transclude></ng-transclude></div>' +
      '</div>'
    };
  });
}(angular.module('app', []), angular));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCTRL">
  <list-items items="listOfItems">
    <div ng-repeat="item in listOfItems track by $index">
      {{item.question}}
    </div>
  </list-items>
</div>

Angular Transclude - ng-repeat doesn't repeat

1 Answers1