2013-05-09 251 views
1

可以說我有一個瀏覽頁面和一個詳細頁面。我也有瀏覽控制器和細節控制器。瀏覽頁面顯示人員列表。當用戶點擊一個人鏈接時,我將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> 
+0

爲什麼你需要通過person.id作爲查詢字符串PARAM?當然,你正在構建一個單頁的應用程序,你不應該需要超過一頁。 – Neil 2013-05-09 11:20:16

+0

該URL看起來像'index.html#view/person?id = 1'。它應該是'index.html#view/person/1'嗎?如果是這樣,我該如何獲取個人ID?我們假設我不傳遞查詢字符串。如何從'BrowseCtrl'範圍內的視圖調用'DetailCtrl'中的方法? – tempid 2013-05-09 11:28:27

回答

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); 
    } 
} 

Example on jsfiddle

但最好創建一個在兩個控制器之間共享的服務是更好的方式來處理整個事情。

+0

謝謝馬克。最近我一直聽到很多關於服務的信息。我會查找它。我的目標是使控制器儘可能通用以處理多個視圖。 – tempid 2013-05-09 14:49:23

0

使用這裏面第一控制器的範圍:

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