Question

我从一个JSON请求接收对象数据，类似于：

{
  "slides": [
    {
      "image": "http://lorempizza.com/380/240",
      "title": "Slide aa",
      "description": "I owe you the description"
    },{
      "image": "http://lorempizza.com/380/240",
      "title": "Slide bb",
      "description": "I owe you the description"
    }
  ],
  "title": "Interesting object",
  "description": "Lorem ipsum dolor sit amet consectetur."
}

我想使用两个不同的视图。一个用于幻灯片，另一个用于对象的标题和描述，所有内容都在同一页面上。为什么？因为我使用ui视图来显示它们。

的index.html

<div ui-view="slider"></div><!-- Here is the slider -->
<main ui-view role="main"></main><!-- Here is title and desc -->

问题在于：

slider.html

<div ng-controller="InterestingObjectCtrl">
    <!-- Display slider -->
</div>

main.html中

<div ng-controller="InterestingObjectCtrl">
    <!-- Display title and desc -->
</div>

InterestingObjectCtrl.js

InterestingService.get()
    .success(function(data) {
      $timeout(function() {
        $scope.$apply(function() {
          $scope.interestingObject = data;
        });
      });
    })

InterestingObjectCtrl控制器将加载两次相同的JSON，从而产生无用的HTTP请求。

什么是正确的方式或＆＃34;棱角分明的方式＆＃34;解决这个问题？

设置一个标志（如if ($scope.requestAlreadyMade) return;）肯定不会起作用。

HTTP请求可能不是什么大问题caching the $http service，但这远远不是这个问题。

将控制器作为包装器调用，如下例所示，将使其从网站上的每个页面加载，这甚至是最糟糕的。

<div ng-controller="InterestingObjectCtrl">
  <div ui-view="slider"></div><!-- Here is the slider -->
  <main ui-view role="main"></main><!-- Here is title and desc -->
</div>

Answer 1

   <div ng-controller="MainCtrl">
         <div ui-view="slider"></div><!-- Here is the slider -->
         <main ui-view role="main"></main><!-- Here is title and desc -->
    </div>

在MainCtrl中加载一次数据并将其面向广播到子控制器：

InterestingService.get()
    .success(function(data) {
      $scope.$broadcast('dataloaded', data);
    });

InterestingObjectCtrl.js

$scope.$on('dataloaded', function (data) {
// do what you want
});

如何在AngularJS中重用不同视图的控制器？

1 个答案: