Accessing data between controller directive and factory

Question

I have created a global variable in factory. And I have accessed the global variable in my controller but upon changing the value in the directive it is unable to update in the controller.

My directive is

myApp.directive('quiz', function(quizFactory) {
return {
    restrict: 'AE',
    scope: {},
    templateUrl: 'templete.html',
    controller: function($scope){
    },
    link: function(scope, elem, attrs,UserService) {
        scope.start = function() {
            UserService.var1=true;
            }
         }  
        };

My Factory is

myApp.factory('UserService', function() {
return {
    var1 : false
    };
 });

My controller is

myApp.controller('LearnSetQue', ['$scope','UserService',
function($scope,UserService){

    $scope.var2=UserService.var1;
    $scope.var3=UserService.var1;
    }
]);

Here start is button function

<button ng-click="start()">Start</button>

Here upon clicking the start button the var1 should become true var1=true,var2=true and var3=true and how can I update that in the controller.

score 3 · Answer 1 · answered Jun 10 '15 at 09:55

3

First in the service, you should return an object with the properties you want to share across your app:

myApp.factory('UserService', function() {
var properties = { var1: false };
return {
    getProperties : function() { return properties; }
    };
 });

Then in the directive

scope.start = function() {
  UserService.getProperties().var1=true;
}

And in the controller you should have:

myApp.controller('LearnSetQue', ['$scope','UserService',
function($scope,UserService){
    $scope.properties = UserService.getProperties();
]);

And then on the view, just reference the var1 directly

<div>{{ properties.var1 }}</div>

answered Jun 10 '15 at 09:55

Joao Leal

5,533
1
13
23

I would have done the same but returning properties directly in my factory instead of a function. The binding would be on UserService.properties.var1 etc... Still a good answer. – Okazari Jun 10 '15 at 09:57
@RamanaUday In addition to this good answer, you can read this post http://stackoverflow.com/questions/30508773/ngrepeat-not-updating-after-model-changed/30510369#30510369 explaining why it don't work using variable instead of objects in services/factories – Okazari Jun 10 '15 at 09:59
Also there is a syntax error in injecting factory in link function (without `require`). It should be referenced in this line `myApp.directive('quiz', function(quizFactory) ` – Kirill Slatin Jun 10 '15 at 10:00
You can share objects and update properties inside the objects (so you might have to create `properties.var2` and `properties.var3`. When it's values you cannot share them and expect them to be shared like that. http://stackoverflow.com/questions/13266616/primitive-value-vs-reference-value – Joao Leal Jun 10 '15 at 10:13
Sorry for that but the start function is not working for me 'UserService.getProperties().var1=true;' is showing as a error for me.Please help me regarding this @Okazari – Ramana Uday Jun 10 '15 at 10:44
Make a plunker to reproduce this error and @JoaoLeal or me will be able to understand what is happening and give you the solution. – Okazari Jun 10 '15 at 12:27
How can I use Isolated Scope in this @Okazari – Ramana Uday Jun 11 '15 at 04:55
@RamanaUday If you have trouble using plunker, here is a blank angular plunker http://plnkr.co/edit/kEntSUtywHtT2OHKnrOO?p=preview . – Okazari Jun 11 '15 at 07:24

Accessing data between controller directive and factory

1 Answers1