CODEWITHSUNDEEP
javascriptangularjs
membersound
membersound

Reputation: 86935

How to modify angularjs data outside of a controller?

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

Upvotes: 2

Views: 175

Answers (2)

Scoup
Scoup

Reputation: 1323

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.

Upvotes: 1

angellica.araujo
angellica.araujo

Reputation: 298

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.

Upvotes: 0

Related Questions