Question

我有一个表将填充JSON数据。在填充表之后，如果有人想要修改任何行，那么它将弹出窗口，您可以在其中进行修改。

我在做什么：
我制作了两个控制器，我想将ng-model值从一个控制器传递给另一个控制器作为窗口控制器。请告诉我如何连接这两个控制器。请看运行示例， http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview

的index.html

<!DOCTYPE html>
<html>

<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
  </div>
  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>

  </div>
  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="task.title" />
                <input type="text"  ng-model="task.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
   <script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
    });
    app.controller('TaskController', function($scope, $rootScope){
        $scope.editTask=function(task){
            $rootScope.task=task;
        }
    });

  </script>
</body>

</html>

Answer 1

首先，将您的body和<body ng-app="myApp" ng-controller="tasksCtrl">放入$scope.editTask=function(task) { $scope.task = task; };元素。

<强> E.g。

tasksCtrl

然后，移动

TaskController

controller。不再需要$scope。你可以删除它。

由于，它只使用一个$rootScope，您可以使用{{1}}代替{{1}}。

这里是Plunkr。

希望它有所帮助。

Answer 2

你要做的是在控制器之间创建一个紧密耦合，但是从我在plunkr中看到的你最好使用angular-ui modal并从代码中实例化模态窗口。

Answer 3

你犯的错误很少你模仿HTML代码的第一个不在ng-app中你可以使用Angular的父子概念，你不需要使用$ rootScope

Pluncker完全解决您的问题：http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview

HTML：

  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>


  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="Edittask.title" />
                <input type="text"  ng-model="Edittask.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
    </div>

控制器：

var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
         $scope.editTask=function(task){
            $scope.selectedTask=task;
        }
    });
    app.controller('TaskController', function($scope, $rootScope){
      $scope.Edittask={};
      $scope.Edittask.title="";
      $scope.Edittask.description="";
      $scope.saveTask=function(){
        console.log('called');
        $scope.selectedTask.title=$scope.Edittask.title;
        $scope.selectedTask.description=$scope.Edittask.description;
      }

    });

Answer 4

如果您需要访问其他控制器中的任何方法并传递数据，您可以这样做，

angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);

如何在angularjs中连接两个不同控制器的ng模型？

4 个答案: