1

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

现在，我有另一个视图，其中浏览和详细信息应该在同一页面中。如何将person.id一个 div（with ng-controller='BrowseCtrl'）传递给另一个 div（with 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>
4

2 回答 2

3

您可以使用的一种方法是在两个控制器之间进行通信$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);
    }
}

jsfiddle 上的示例

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

于 2013-05-09T11:44:33.587 回答
0

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

        var div = document.querySelector('#Controller2');
        var scope = angular.element(div).scope();
        scope.myVal = true; //access the value of the 2nd controller
于 2013-06-26T01:47:53.783 回答