将值从一个控制器传递到另一个控制器答案

【问题标题】：Pass value from one controller to another from the view将值从一个控制器传递到另一个控制器
【发布时间】：2013-06-26 09:47:53
【问题描述】：

假设我有一个浏览页面和一个详细信息页面。我也有浏览控制器和细节控制器。浏览页面显示人员列表。当用户单击人员链接时，我将 person.id 作为查询字符串参数传递到详细信息页面。这里一切都很好。

现在，我有另一个视图，其中浏览和详细信息应该在同一页面中。如何将person.id 从一个 div（ng-controller='BrowseCtrl'）传递到另一个 div（ng-controller='DetailCtrl'）？

我们的目标是使控制器尽可能通用。

 function BrowseCtrl($scope) {
        $scope.persons = db.getPersons();
        $scope.getPerson = function (personId) {
            $location.path('/person').search({
                id: personId;
            });
        };
    }

    function DetailCtrl($scope, $location) {
        $scope.person = db.getPerson($routeParams.id);
    }

    //singlepage.html
     <div ng-controller="BrowseCtrl"> 
          <ul id="thumbList">
             <li ng-repeat="person in persons">
               <img ng-src="{{person.photo}}" ng-click="getPerson(person.id)"/>
             </li>
          </ul>
    </div>
    <div ng-controller="DetailCtrl">
       Name: {{person.name}} 
    </div>

【问题讨论】：

为什么需要将 person.id 作为查询字符串参数传递？当然，您正在构建一个单页应用程序，您不需要超过一页。
URL 类似于index.html#view/person?id=1。应该是index.html#view/person/1 吗？如果是这样，我如何获取人员 ID？假设我没有传递查询字符串。如何从BrowseCtrl 范围内的视图调用DetailCtrl 中的方法？

标签： angularjs

【解决方案1】：

您可以使用的一种方法是 $broadcast() 和 $on() 在两个控制器之间进行通信。

function BrowseCtrl($scope, $rootScope) {
    $scope.persons = db.getPersons();
    $scope.getPerson = function (personId) {
       $rootScope.$broadcast("personId", personId);
    };
}


function DetailCtrl($scope, $location) {
    $scope.$on("personId", function(event, id){
       $scope.person = db.getPerson(id);
    }
}

Example on jsfiddle

但理想情况下，创建一个在两个控制器之间共享的服务是处理整体事务的更好方法。

【讨论】：

谢谢马克。我最近听到了很多关于服务的消息。我会查查的。我的目标是使控制器尽可能通用以处理多个视图。

【解决方案2】：

在第一个控制器的范围内使用它：

        var div = document.querySelector('#Controller2');
        var scope = angular.element(div).scope();
        scope.myVal = true; //access the value of the 2nd controller

【讨论】：