訪問Angular.js中的另一個控制器

Question

到目前為止，我的基本代碼：

function UsersCtrl($scope) {
    $scope.users = [
        {
            "id": 1,
            "usersName": "Matt Dance",
            "favorites": {
                "id":1,
                "lodge_id":1
            }
        },
        {
            "id":2,
            "usersName": "Jennifer Dance",
            "favorites": {
                "id":1,
                "lodge_id":2
            }
        }
    ];
};

function LodgesCtrl($scope) {
    $scope.lodges = [
        {
            id: 1,
            lodgesName: 'Matt\'s Awesome Lodge',
            lodgeOwnersName: 'Matthew D',
            lodgeStreetAddress: '5555 J lane',
            lodgeCity: 'Salt Lake city',
            lodgeZip: '11111',
            lodgeState: 'Utah'
        },
        {
            id: 2,
            lodgesName: 'Some Historic Lodge',
            lodgeOwnersName: 'Santa Claus',
            lodgeStreetAddress: '1 Clearwater Road',
            lodgeCity: 'Grand Marais',
            lodgeZip: '55555',
            lodgeState: 'Minnesota'
        },
        {
            id: 3,
            lodgesName: 'Yellowstone Lodge',
            lodgeOwnersName: 'The Feds',
            lodgeStreetAddress: '1 Yellowstone Way',
            lodgeCity: 'Yellowstone',
            lodgeZip: '55555',
            lodgeState: 'Wyoming'
        },
        {
            id: 4,
            lodgesName: 'Cool Lodge',
            lodgeOwnersName: 'Awesome Guy',
            lodgeStreetAddress: '1 awesome Road',
            lodgeCity: 'Eagle Mountain',
            lodgeZip: '55555',
            lodgeState: 'Utah'
        },
        {
            id: 5,
            lodgesName: 'The last lodge',
            lodgeOwnersName: 'Adam V',
            lodgeStreetAddress: '444 Last Road',
            lodgeCity: 'San Francisco',
            lodgeZip: '55555',
            lodgeState: 'California'
        }
    ];
};

我希望用戶能夠看到他們喜歡的旅館的旅館名稱。 例如，一個用戶收藏了ID為1的小屋。然后，我如何循環瀏覽每個用戶，並顯示喜歡的小屋的標題？ 基本上，我需要為每個用戶的收藏夾使用lodge_id來顯示小屋名稱。

到目前為止，我的html：

<div ng-controller="UsersCtrl">
<ul class="unstyled">
  <li ng-repeat="user in users">
    {{user.usersName}}<br>
  </li>
</ul>
</div>

我是Angular（和JS框架）的新手，並且不確定如何做到這一點。 我研究了其他框架，例如Ember，但是無法以“簡單”的方式解決它。

Answer 1

最簡單的解決方案是構造一個映射對象並將其綁定到$ rootScope。 例如：

$rootScope.mapping = {
    userId: [lodge1, lodge2...]
}

Answer 2

我對您的代碼進行了很少的更改，並且現在可以正常工作，但是我認為您需要以更好的方式來結構化數據，以便以更簡單的方式進行迭代。

您還可以在此處查看正在工作的插銷（ http://plnkr.co/edit/DtBxzYulJGTQC0KJsh8M?p=preview ）。

 <!doctype html>
 <html lang="en" ng-app="myApp">
    <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script>

var myApp = angular.module('myApp', []);

myApp.controller('UsersCtrl', ['$scope', function ($scope) {
    $scope.users = [
        {
            "id": 1,
            "usersName": "Matt Dance",
            "favorites": {
                "id":1,
                "lodge_id":1
            }
        },
        {
            "id":2,
            "usersName": "Jennifer Dance",
            "favorites": {
                "id":1,
                "lodge_id":2
            }
        }
    ];

    $scope.lodges = [
        {
            id: 1,
            lodgesName: 'Matt\'s Awesome Lodge',
            lodgeOwnersName: 'Matthew D',
            lodgeStreetAddress: '5555 J lane',
            lodgeCity: 'Salt Lake city',
            lodgeZip: '11111',
            lodgeState: 'Utah'
        },
        {
            id: 2,
            lodgesName: 'Some Historic Lodge',
            lodgeOwnersName: 'Santa Claus',
            lodgeStreetAddress: '1 Clearwater Road',
            lodgeCity: 'Grand Marais',
            lodgeZip: '55555',
            lodgeState: 'Minnesota'
        },
        {
            id: 3,
            lodgesName: 'Yellowstone Lodge',
            lodgeOwnersName: 'The Feds',
            lodgeStreetAddress: '1 Yellowstone Way',
            lodgeCity: 'Yellowstone',
            lodgeZip: '55555',
            lodgeState: 'Wyoming'
        },
        {
            id: 4,
            lodgesName: 'Cool Lodge',
            lodgeOwnersName: 'Awesome Guy',
            lodgeStreetAddress: '1 awesome Road',
            lodgeCity: 'Eagle Mountain',
            lodgeZip: '55555',
            lodgeState: 'Utah'
        },
        {
            id: 5,
            lodgesName: 'The last lodge',
            lodgeOwnersName: 'Adam V',
            lodgeStreetAddress: '444 Last Road',
            lodgeCity: 'San Francisco',
            lodgeZip: '55555',
            lodgeState: 'California'
        }
    ];
   }]);


   </script>

    </head>
    <body>

 <div ng-controller="UsersCtrl">
 <ul>
  <li ng-repeat="user in users">
    {{user.usersName}}<br>
    {{user.favorites.lodge_id}}<br>
        <p ng-repeat="lodge in lodges | filter: { id: user.favorites.lodge_id }">
            {{lodge.lodgesName}}
        </p>
  </li>
</ul>
</div>

 </body>
 </html>

Answer 3

您應該使用服務。 由於服務是單例，因此它們是在控制器之間共享內容的最簡單方法。 實際上，這是有角度的方式：

請勿將控制器用於：

跨控制器共享無狀態或有狀態代碼-改用角度服務。

開發人員指南/了解控制器組件

訪問Angular.js中的另一個控制器

問題描述

3 個解決方案

解決方案1
1 2013-10-01 23:09:58

解決方案2
0 2013-10-01 23:21:27

解決方案3
0 2013-10-01 23:29:01

訪問Angular.js中的另一個控制器

問題描述

3 個解決方案

解決方案1 1 2013-10-01 23:09:58

解決方案2 0 2013-10-01 23:21:27

解決方案3 0 2013-10-01 23:29:01

解決方案1
1 2013-10-01 23:09:58

解決方案2
0 2013-10-01 23:21:27

解決方案3
0 2013-10-01 23:29:01