如何在多个控制器之间封装设置$scope值

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

本文关键字：设置 封装 scope 之间 控制器      更新时间：2023-09-26

这是我的第一个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的表数据、检查本地存储的表数据，然后将这些数据放入$scope.kitties、$scope.princiesses或$scope.fairs的行为封装起来。每个页面都有自己的控制器，我不想将重复的代码放在每个页面的控制器中。我可以把这个封装的代码放在哪里？我尝试了一项服务，但无法从该服务访问$scope。我认为指令不起作用，因为我只想在$scope中设置一个值。

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

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

为了做到这一点，请遵循以下步骤：

a。为了做到这一点，创建一个名为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>
相关文章：