当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

It's my first Angular project and I have multiple pages with view code that looks like this:

<!-- 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>

I'm trying to encapsulate out the behaviour of checking the backend API for the table data, checking local storage for the table data, and then putting that data into $scope.kitties, $scope.princesses or $scope.fairies. Each page has their own controller and I don't want to put that repeated code in each page's controller. Where can I put this encapsulated code? I tried a service, but I can't access $scope from the service. I don't think a directive works because I only want to set one value in the $scope.

网友答案:

1. A service it's one of the good ways to do it, but you don't need to access $scope from it. Look below at this example:

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

So, I've declared a service, where I get my data and I send this service as a reference to controllers, where I can use it by calling .custom-property

2. Another way it's to have a mainController in your master page. Declare there everything you want and it will be visible from every child controller across the application ( because of inheritance )

Example :

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

UPDATE: I think I didn't understand well first time I read it and what you really want is to encapsulate your view code into something to share it across multiple pages

In order to do that follow these steps:

a. In order to do that create a controller called, for example, magicalListController, where you'll put your code to fill your arrays ( kitties, fairies and princesses )

b. Put that html code in a separate view

c. Include it in your pages

Example:

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 

And insert into another view

 <div ng-include="'path to your view'" ng-controller="magicalListController"></div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: