Question

我尝试使用某些控件上的自定义操作创建一个超过平均水平的复杂表单。视图的主控制器持有将在末尾保存的模型。在这个主控制器内部，每个输入控件都有一个单独的控制器，它有一些特定的动作。

这是一个简短的示例，问题是，如果我想实现UserChoiceCtrl.selectLastUser函数，如何在不使用$scope的情况下执行此操作？

更一般地说，如何在子控制器的主控制器中访问模型？它在视图中很容易，但我怎么能在控制器代码中做呢？

＆＃13;

angular.module('myApp', []);

angular.module('myApp')
  .controller('TaskCtrl', [
    function() {
      var viewModel = this;

      // This is injected in controller in real life
      viewModel.users = [
        {login: 'Tom', password: '123'}, 
        {login: 'Stanley', password: '123'}, 
        {login: 'Joe', password: '123'}, 
        {login: 'Katy', password: '123'},
        {login: 'Kate', password: '123'},
        {login: 'Tony', password: '123'}
      ];

      viewModel.task = {
        user: viewModel.users[0],
        description: ''
      };

      viewModel.save = function() {
        alert(angular.toJson(viewModel.task));
      };
    }
  ]);

angular.module('myApp')
  .controller('UserChoiceCtrl', [
    function() {
      var viewModel = this;

      viewModel.selectLastUser = function() {
        // No way to access the task variable @ TaskCtrl ?

        // The following line is working but using $scope
        // $scope.taskCtrl.task.user = $scope.taskCtrl.users[5];
      };
    }
  ]);

＆＃13;

body {
  font-family: 'Arial';
}
label,
input,
textarea {
  display: block;
}
label {
  margin-top: 8px;
}

＆＃13;

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body data-ng-controller="TaskCtrl as taskCtrl">
  <h1>New task</h1>
  <form name="taskCtrl.taskForm">
    <label>Description</label>
    <textarea data-ng-model="taskCtrl.task.description"></textarea>
    <div data-ng-controller="UserChoiceCtrl as userChoiceCtrl">
      <label>User</label>
      <select data-ng-model="taskCtrl.task.user" data-ng-options="user as user.login for user in taskCtrl.users"></select>
      <button data-ng-click="userChoiceCtrl.selectLastUser()">Last user of list</button>
    </div>
    <br>
    <button data-ng-click="taskCtrl.save()">Save</button>
  </form>
</body>

</html>

＆＃13;

Answer 1

试试这个

<button data-ng-click="userChoiceCtrl.selectLastUser(taskCtrl.task.user)">Last user of list</button>

 viewModel.selectLastUser = function(user) {
        alert(user);
        // No way to access the task variable @ TaskCtrl ?

        // The following line is working but using $scope
        // $scope.taskCtrl.task.user = $scope.taskCtrl.users[5];
   };

Answer 2

一种方法可以是将主控制器创建为服务并将其注入到子项中： http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html

Answer 3

看看这是否符合目的，基本上我正在使用$ controller服务获取任务控制器的实例。

angular.module('myApp')
  .controller('UserChoiceCtrl', function ($controller) {
      var task = $controller('TaskCtrl');
      console.log("Task", task);
      var viewModel = this;

      viewModel.selectLastUser = function () {
           // No way to access the task variable @ TaskCtrl ?

           // The following line is working but using $scope
           // $scope.taskCtrl.task.user = $scope.taskCtrl.users[5];
           task.task.user = task.users[5];
           alert ( task.task.user.login);
     };
     console.log("User", viewModel)
  });

使用嵌套控制器和＆＃34;控制器作为＆＃34;句法

3 个答案: