访问 Angular .js 中的另一个控制器

Access another controller in Angular.js

本文关键字：另一个 控制器 Angular js 访问      更新时间：2023-09-26

到目前为止我的基本代码：

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这样的其他框架，但无法以"简单"的方式解决它。

最简单的解决方案是构造一个映射对象并将其绑定到$rootScope。例如：

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

我对你的代码做了一些更改，它现在可以工作了，但我认为你需要以更好的方式构建数据，以便你可以以更简单的方式进行迭代。

您还可以在此处看到一个工作 plunker（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>

您应该使用服务。由于服务是单例，因此它们是在控制器之间共享内容的最简单方法。事实上，这是角度的方式：

请勿将控制器用于：

在控制器之间共享无状态或有状态代码 — 使用角度服务代替。

开发人员指南/了解控制器组件

相关文章：