How to modify angularjs data outside of a controller?

Question

I have a main page that consists of only two parts: a navigation headline, and the dynamic content.

index.html:

<div ng-controller='MainCtrl'>
    <li ng-repeat="nav in navs">
        <a href="#{{nav.url}}">{{nav.name}}</a>
    </li>
</div>
<div ng-view></div> <!-- replaced by ngRoute -->

The navigation is achieved as follows:

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/test", {
        templateUrl : "templates/test.html",
        controller : "testController"
    });
});

The headline links should be provided by the backend on each webservice request. Question: how can I trigger the following initfunction from within another controller (the one receiving the get response)? I lateron want to trigger this method from within different controllers.

app.controller('MainCtrl', ['$scope', function($scope) {
    this.init = function(data) {
        $scope.navs = data;
    }
}]);

I tried the following, which did not work:

test.html:

<div>
    <h1>some stuff provided by testController.js</h1>
</div>

testController.js:

angular.module('test').controller('testController', ['$scope', '$http', '$controller', function($scope, $http, $controller) {
    $http.get(url)
        .success(function(data) {
            $controller('MainCtrl').init(data.mynavigation); //assume navigations exists

            //process content in data
        });
}]);

Result:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20MainCtrl

Use a service to share data and methods across app components like controllers — charlietfl, Sep 21 '15 at 12:31
Well my goal is to just initialize the variable `$scope.navs` with the navigation links from within a conroller. Problem is that the controllers' are out of scope of the navigation, as `MainCtrl` is assigned to the navigation area. — membersound, Sep 21 '15 at 12:35
@charlietfl could you provide an example how I chould share a service to initialize the repeated links in `{{nav.name}}`? — membersound, Sep 21 '15 at 12:38
I mean: how can the service itself access the `ng-repeat` elements and initialize them? — membersound, Sep 21 '15 at 12:39
by simply passing the data to the other controller from service — charlietfl, Sep 21 '15 at 12:40
So I would call the service from a controller, and the service calls in turn my `MainCtrl`? Why not calling the controller directly from another controller? — membersound, Sep 21 '15 at 12:43
No...service would call server and share data across other parts of the app — charlietfl, Sep 21 '15 at 12:45
@membersound you not _call_ service - just set data, and angular just render data from service automatically on next digest loop — Grundy, Sep 21 '15 at 12:45
There are lots of tutorials and examples around the web for doing this — charlietfl, Sep 21 '15 at 12:47

score 1 · Answer 1 · answered Sep 21 '15 at 18:37

Instead of setting the data with the init, I recomend to inject a service in your $scope of controller, so you don't need to call the function in controller but just change the data of your service.

Something like this:

app.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
    this.navs = myService;
}]);

html:

<div ng-controller='MainCtrl'>
    <li ng-repeat="nav.data in navs">
        <a href="#{{nav.url}}">{{nav.name}}</a>
    </li>
</div>

Then, your service:

app.factory('myService',function() {
   var myService = {
       data: [],
       setData(data): function(data) {
           this.data = data;
       }
   }
   return myService;
});

This is just to ilustrate: the myService is the same object in all your application, if you change the myService.data, every controller that injects this service will use the same data.

So you put your trigger in another controller to update this service. This technique is used to share data between directives too.

This is an interesting approach. Would you say using a `.factory()` rather than a `.service()` is better here? If yes, why? — membersound, Sep 22 '15 at 07:25
There is no much diference between then, but I like more because keep it simple, http://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory — Scoup, Sep 22 '15 at 18:17

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

If you want to run init function whitin your controller initialization, just call this.init() in your controller.

To wok with inheritance, consider doing scope inheritance. There are examples in docs : https://docs.angularjs.org/guide/controller

If you want to reuse call/response code, you may consider creating a service and injecting it as a dependence in your controller as you need. Create a service that returns a promise and handle this promise inside controllers.

Refer to https://docs.angularjs.org/api/ng/service/$q in order to understand how to work with angular promises.

Refer to AngularJS: Service vs provider vs factory for more information about services usage.

edited May 23 '17 at 12:22

Community

1
1

answered Sep 21 '15 at 12:56

angellica.araujo

298
1
12

but OP want call _init_ function from one controller inside another – Grundy Sep 21 '15 at 12:58
Better to use the internal angular event system, or quickly write your own! – Callum Linington Sep 21 '15 at 12:59

How to modify angularjs data outside of a controller?

2 Answers2