Question

假设我有一个浏览页面和一个详细信息页面。我也有浏览控制器和细节控制器。浏览页面显示人员列表。当用户单击某个人链接时，我将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>

Answer 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

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

Answer 2

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

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

从视图中将值从一个控制器传递到另一个控制器

2 个答案: