Question

我在AngularJS中有一个类似于

的待办事项列表

.controller('TodoCtrl', function ($scope) {
    $scope.todos = [
      {text:'Ask smth on Stackoverflow', done:false},         
      {text: 'Resolve this', done:false}
    ];
  
    $scope.getTotalTodos = function () {
        return $scope.todos.length;
    };
  
  
    $scope.addTodo = function () {
        $scope.todos.push({text:$scope.formTodoText, done:false});
        $scope.formTodoText = '';
    };
  
    $scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });
    };
})

我想从我点击按钮时启动的另一个控制器添加一个Todo（带有文本和布尔'完成'）。我怎么能这样做？

非常感谢谁能帮助我

Answer 1

通常，服务用于来回传递信息。创建服务并将TODO列表存储在那里。将该服务注入两个控制器。现在，每个控制器都可以对列表中的项目进行操作

Answer 2

我会用一些简短的代码追加Scotts的回答。就像他说的，最好是使用服务;）服务：

.factory('todoService', function() {
    var todolist = [];
    return {
        getTodoList: function() {
            return todolist;
        }
        addTodo: function(todo) {
            todolist.push(todo);
        },
        getTotalTodos: function() {
            return todolist.length;
        },
        // some other
    }
});

现在您可以通过

将服务注入任何控制器

.controller('TodoCtrl', function ($scope, todoService)

然后你可以在控制器中调用服务的功能，例如

$scope.addTodo = function () {
    todoService.addTodo({text:$scope.formTodoText, done:false});
    $scope.formTodoText = '';
};

Answer 3

使用Angular Services：

我做了一个简单的演示。

希望这有帮助。

＆＃13;

(function() {
  var app = angular.module("myApp", []);
  // myService service.- This service contains an array, called «todos» wich contains data.
  app.service("myService", function() {
    return {
      todos: [{
        "text": "Ask smth on Stackoverflow",
        "done": false
      }, {
        "text": "Resolve this",
        "done": false
      }]
    };
  });
  // Add the dependecy in the controller.
  app.controller("Controller", ["$scope", "myService",

    function($scope, myService) {
      $scope.title = "TODOS";

      // This function returns the data stored in the service.
      $scope.getTodos = function() {
        return myService.todos;
      }();

      $scope.getTotalTodos = function() {
        return myService.todos.length;
      };

      // This functions contains the object with the values from the form.
      $scope.addTodo = function(model) {
        myService.todos.push({
          text: model.text,
          done: model.done
        });
        $scope.model.text = "";
      };
    }
  ]);
})();

＆＃13;

<html data-ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body data-ng-controller="Controller">
  <h3>{{title}}</h3>
  <form id="myForm" ng-submit="addTodo(model)">
    <label>
      Todo
      <input type="text" data-ng-model="model.text" />
    </label>
    <br />
    <label>
      Done
      <input type="checkbox" data-ng-model="model.done" />
    </label>
    <br/>
    <button type="submit">Add</button>
    <hr />
    <ul>
      <li data-ng-repeat="todo in getTodos">
        {{todo.text}} ({{todo.done}})
        <input type="checkbox" data-ng-model="todo.done" />
      </li>
    </ul>
  </form>
</body>

</html>

＆＃13;

更新：在多个控制器中使用该服务。

＆＃13;

(function() {
  var example = angular.module("starter", [])

  example.service("todoService", function() {
    return {
      todos: [],
      addTodo: function($text, $classe) {
        this.todos.push({
          text: $text,
          done: false,
        });
      }
    };
  });

  example.controller('nationsLeaguesCtrl', function($scope, todoService) {
    $scope.randomNationsLeagues = function() {
      var text = "Text 1";
      todoService.addTodo(text, null);
    };
  })

  example.controller('statsCtrl', function($scope, todoService) {
    $scope.randomStats = function() {
      var text = "Text 2";
      todoService.addTodo(text, null);
    };
  })

  example.controller('specialCtrl', function($scope, todoService) {
    $scope.randomSpecial = function() {
      var text = "Text 3";
      todoService.addTodo(text, null);
    };
  })

  example.controller('TodoCtrl', function($scope, todoService) {

    $scope.getTodos = function() {
      return todoService.todos;
    }();

    $scope.getTotalTodos = function() {
      return todoService.todos.length;
    };

    $scope.clearCompleted = function() {
      $scope.todos = _.filter($scope.todos, function(todo) {
        return !todo.done;
      })
    };
  });
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="starter">
  <button class="button button-full button-light" ng-controller="nationsLeaguesCtrl" ng-click="randomNationsLeagues()">Nations & Leagues</button>
  <button class="button button-full button-light" ng-controller="statsCtrl" ng-click="randomStats()">Stats</button>
  <button class="button button-full button-light" ng-controller="specialCtrl" ng-click="randomSpecial()">Special</button>
  <div ng-controller="TodoCtrl">
    <ul>
      <li ng-repeat="todo in getTodos">{{todo.text}}
        <input type="checkbox" name="checkboxG1" id="checkboxG1" ng-model="todo.done" class="css-checkbox" />
        <label for="checkboxG1" class="css-label" style="font-family:checkboxFont; color:#ffffff;"><span class="done-{{todo.done}}"></span>

        </label>
      </li>
    </ul>
  </div>
</body>

＆＃13;

如何从另一个控制器添加待办事项

3 个答案: