javascript - 如何封装跨多个 Controller 设置 $scope 值？

Question

这是我的第一个 Angular 项目，我有多个页面，其中的 View 代码如下所示:

<!-- in myapp.com/kitties -->
<tr ng-repeat="row in kitties">
    <td>{{row.fuzziness}}</td>
    <td>{{row.meowLevels}}</td>
    <td>{{row.evilness}}</td>
    <td>{{row.redDotProgress}}</td>
</tr>

<!-- in myapp.com/princesses -->
<tr ng-repeat="row in princesses">
    <td>{{row.magic}}</td>
    <td>{{row.woodlandCreatureCount}}</td>
</tr>

<!-- in myapp.com/fairies-->
<tr ng-repeat="row in fairies">
    <td>{{row.friendship}}</td>
    <td>{{row.mischief}}</td>
    <td>{{row.wingColour}}</td>
</tr>

我试图封装检查后端 API 的表数据、检查表数据的本地存储，然后将该数据放入 $scope.kitties、$scope.princesses 或 $scope.fairies 的行为。每个页面都有自己的 Controller ，我不想将重复的代码放入每个页面的 Controller 中。我可以把这个封装的代码放在哪里？我尝试了一项服务，但无法从该服务访问 $scope。我认为指令不起作用，因为我只想在 $scope 中设置一个值。

Answer 1

1. 服务是实现此目的的好方法之一，但您不需要从中访问 $scope。请看下面这个示例:

app.factory('generalService', function($timeout,$http,$q,$location){

  var kitties= getYourKittiesFunction();

  var service={
     kitties:kitties
  };
  return service;
});


app.controller('yourController', function($scope,generalService{
  // you have generalService.kitties now
})

因此，我声明了一个服务，我在其中获取数据并将该服务作为对 Controller 的引用发送，我可以通过调用 .custom-property 来使用它

2. 另一种方法是在您的母版页中添加一个mainController。在那里声明您想要的所有内容，并且它对于应用程序中的每个子 Controller 都是可见的(因为继承)

示例:

<div ng-controller="parentController">
    <h1>{{text}}</h1>
    <div ng-controller="childController">
        <h1>{{text}}</h1>
    </div>
</div>

app.controller("parentController", [ '$scope', function($scope){
    $scope.text= "Hello world";
 }]);

app.controller("childController", [ '$scope', function($scope){
    // $scope.text is visible from parentController
}]);

<小时/>

更新: 我想我第一次读它的时候不太理解，你真正想要的是将你的 View 代码封装成一些东西来跨多个页面共享

为此，请按照以下步骤操作:

a.为此，创建一个名为 magicalListController 的 Controller ，您可以在其中放置代码来填充数组(小猫、仙女和公主)

b.将该 html 代码放在单独的 View 中

c.将其包含在您的页面中

示例:

app.controller('magicalListController', function($scope){
  $scope.kitties=// get your kitties
  $scope.fairies= // get your fairies
  $scope.princesses= // get your princesses
});

   // View code it's exactly how you posted in 

并插入到另一个 View

 <div ng-include="'path to your view'" ng-controller="magicalListController"></div>