How to make common method with respect to scope in angularjs

Question

Consider I have same method as below in multiple controllers,

$scope.onDraft = function () {
    $scope.draft = true;
    $scope.saveOnDraft();
};

and hence saveOnDraft() method has to be defined multiple times in those controllers.

This is creating code duplication, Is there any why where i can make these methods (OnDraft() & saveOnDraft()) common, I can not use service and factory because it will not update my scope object from it.

Any help would be much appreciated.

score 2 · Accepted Answer · answered Feb 04 '16 at 05:11

Indeed, you need to use the service.

If you onDraft method should be carried out equally in all controllers, you must use a singleton. If you onDraft method depends on the value in the controller, you must use the service instance.

Live example on jsfiddle.

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleOneController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .controller('ExampleTwoController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .service('ReuseService', function() {
    return {
      varReuse: 'im not using yet',
      imReuseFunction: function(val) {
        this.varReuse = val;
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('one')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('one')">
        Reuse me singleton
      </button>
    </form>

  </div>
  <hr>
  <div ng-controller="ExampleTwoController">
    <h3>
      ExampleTwoController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('two')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('two')">
        Reuse me singleton
      </button>
    </form>

  </div>
</div>

I'm glad I could help you. Please, if my answer is correct, then enter it as a valid answer. Thank you. — Stepan Kasyanenko, Feb 04 '16 at 09:32

Mohammed mansoor · Answer 2 · 2016-02-04T03:41:44.357

1

Try this

In factory add this.

var root = {};

root.onDraft = function () {
    $scope.draft = true;
    $scope.saveOnDraft();
};
...........
...........
return root;

In controllers, it can be accessed like

// Consider 'Factory' is the name of the factory and injected to this controllers also
$scope.onDraft = Factory.onDraft();

Same way it can be accessed in multiple controllers.

edited Feb 04 '16 at 03:41

answered Feb 04 '16 at 03:37

Mohammed mansoor

743
3
11
18

This makes sense, let me try this. – jsduniya Feb 04 '16 at 03:40
Factory throws error as $scope not defined. this approach will not help. – jsduniya Feb 04 '16 at 06:37
Either inject scope to factory or use root instead of scope. – Mohammed mansoor Feb 04 '16 at 06:45
You can't inject $scope into services, there is no such thing as a Singleton $scope. – jsduniya Feb 04 '16 at 06:51
use normal function then.. bro... var draft = true; – Mohammed mansoor Feb 04 '16 at 06:54

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

0

You need to use service or factory for reusing the methods. Otherwise you may use directives. Check this

how to reuse a function in multiple controllers

edited May 23 '17 at 12:23

Community

1
1

answered Feb 04 '16 at 03:39

Thangaraja

926
6
20

How to make common method with respect to scope in angularjs

3 Answers3