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的行为，检查表数据的本地存储，然后将这些数据放入$ 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。在mainController中拥有master page的另一种方式。在那里声明你想要的一切，它将从应用程序中的每个子控制器中可见（因为继承）

示例：

<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的控制器，您可以在其中放置代码来填充阵列（小猫，仙女和公主）

湾将该HTML代码放在单独的视图中

℃。将其包含在您的网页中

示例：

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值？

1 个答案: