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

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

javascript json angularjs

Javascript 访问Angular.js中的另一个控制器,javascript,json,angularjs,Javascript,Json,Angularjs,到目前为止，我的基本代码是： function UsersCtrl($scope) { $scope.users = [ { "id": 1, "usersName": "Matt Dance", "favorites": { "id":1, "lodge_id":1 } }, {

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

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\u id

来显示小屋名称

到目前为止，我的html是：

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




{{user.usersName}}

我对Angular（一般来说是JS框架）是新手，不知道该怎么做。我研究过其他框架，如Ember，但还不能以“简单”的方式解决它。

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

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

我对您的代码做了一些更改，它现在正在运行，但我认为您需要以更好的方式构造数据，以便以更简单的方式进行迭代

您还可以在此处看到一个正在工作的plunker（）


文件
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'UsersCtrl'，['$scope'，函数（$scope）{
$scope.users=[
{
“id”：1，
“用户名称”：“马特舞蹈”，
“收藏夹”：{
“id”：1，
“洛奇id”：1
}
},
{
“id”：2，
“usersName”：“Jennifer Dance”，
“收藏夹”：{
“id”：1，
“洛奇id”：2
}
}
];
$scope.lodges=[
{
id:1，
小屋名称：“马特的很棒的小屋”，
房主姓名：“Matthew D”，
酒店地址：“5555J巷”，
住宿城市：“盐湖城”，
lodgeZip:'11111'，
“犹他州”
},
{
id:2，
lodgesName:“一些历史悠久的小屋”，
房主姓名：“圣诞老人”，
酒店地址：“清水路1号”，
lodgeCity:“大马来斯”，
lodgeZip:'55555'，
“明尼苏达州”
},
{
id:3，
旅馆名称：“黄石旅馆”，
房主姓名：“联邦调查局”，
lodgeStreetAddress:“黄石大道1号”，
住宿城市：“黄石公园”，
lodgeZip:'55555'，
洛德盖斯特：“怀俄明州”
},
{
id:4，
旅馆名称：'酷旅馆'，
房主姓名：“帅哥”，
lodgeStreetAddress:“一条很棒的路”，
住宿城市：“鹰山”，
lodgeZip:'55555'，
“犹他州”
},
{
id:5，
旅馆名称：'最后的旅馆'，
房主姓名：“亚当五世”，
旅馆地址：“最后一条路444号”，
洛奇城：“旧金山”，
lodgeZip:'55555'，
“加州”
}
];
}]);


{{user.usersName}}

{{user.favorites.lodge_id}}


{{lodge.lodgesName}

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

不要将控制器用于：

跨控制器共享无状态或有状态代码-使用而是服务

我相信mdance是在问两个控制器是如何相互交谈的。您的解决方案只有一个控制器。请注意，您引用的文本涉及共享“代码”，而不是共享数据。事实上，AngularJS FAQ指出：“相反，不要创建一个在生活中唯一目的就是存储和返回数据位的服务”。FAQ实际上告诉我们，$rootScope可能也应该用于此目的。不过，我不确定我是否完全同意他们的建议，其他人也对此表示怀疑。那么，什么是最佳实践呢？最终，我是在共享数据，而不是代码。到目前为止还不清楚最好的方法是什么。这基本上是将一个用户id映射到几个小屋id。。。对的

 <!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>