0

一直在使用 Angular 指令并遇到了一个我偶然发现的问题......以下是代码：

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

对象被成功推送到数组中，但为什么它们不重复呢？

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

感谢您的任何帮助。

4

1 回答 1

0

和：

scope: {
  items : '='
}

您将范围变量的名称指定为items. 然而你listOfItems在指令控制器中使用。将其更改为items，它将起作用。

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

于 2014-10-20T13:58:38.033 回答