Question

作为使用angular制作简单待办事项列表的做法，我在添加item方法时遇到了问题。

<body>
<ul>
    <li ng-repeat="todo in thingsTodo">{{todo}}</li>
    <li><input ng-model="addMe">
        <button ng-click="addItem()">add</button></li>
</ul>
</body>

<script>
    var app = angular.module('myApp', [])
                     .controller('myCtrl', function($scope, service){

                      $scope.thingsTodo = service.thingsTodo();
                      $scope.addItem = service.addItem($scope.addMe);

     });

     app.factory('service', function(){

         var list = ["grocery shopping", "programming", "playing guitar"];

         return{

            thingsTodo :  function (){      
                 return list;
             },

            addItem : function(input){
                 list.push(input);
                 return list;
            }
         };
      });

</script>

单击“添加”按钮时，应添加输入的项目。但即使在点击添加按钮之前，仍然会添加空白。

我的代码出了什么问题？

Answer 1

您已将addItem指定为html中的函数，但它不是控制器中的函数。将其更改为：

$scope.addItem = function(){
    service.addItem($scope.addMe);
}

Answer 2

$scope.addItem = service.addItem($scope.addMe);

该行立即执行该功能，结果存储在$scope.addItem中。因此$scope.addItem不是函数（返回结果是函数除外），稍后您无法使用$scope.addItem()

调用它

您实际需要的是javascript中的.bind函数。

$scope.addItem = service.addItem.bind(null, $scope.addMe)

这几乎相当于

$scope.addItem = function() {
  service.addItem($scope.addMe);
}

在另一个答案中提到。

我的角度工厂在列表中添加项目有什么问题？

2 个答案: