您如何封装跨多个控制器设置 $scope 值？

Question

这是我的第一个 Angular 项目，我有多个页面的视图代码如下所示：

<!-- 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 的 table 数据，检查本地存储的 table 数据，然后将该数据放入的行为$scope.kitties、$scope.princesses 或 $scope.fairies。每个页面都有自己的控制器，我不想将重复的代码放在每个页面的控制器中。我可以把这个封装的代码放在哪里？我尝试了一项服务，但无法从该服务访问 $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
})

所以，我已经声明了一个服务，我在其中获取数据并将此服务作为对控制器的引用发送，我可以通过调用 .custom-property

来使用它

2. 另一种方法是在 master page 中添加 mainController。在那里声明你想要的一切，它将从应用程序中的每个子控制器可见（因为继承）

示例：

<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
}]);

更新：我想我第一次阅读它时并没有很好地理解它，你真正想要的是将你的视图代码封装到一些东西中以在多个页面上共享它

为此，请执行以下步骤：

一个。为此，创建一个名为 magicalListController 的控制器，您可以在其中放置代码以填充数组（小猫、仙女和公主）

b。将 html 代码放在单独的视图中

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

并插入另一个视图

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

您如何封装跨多个控制器设置 $scope 值？

How do you encapsulate setting a $scope value across multiple controllers?

javascript

encapsulation

angularjs