angularjs - Javascript GetterSetter in Angular Service with 2 Controllers

I am messing with javascript getters and setters in my service layer. I am using 2 controllers. The first controller just displays some text. The second controller allows hiding it. I am trying to figure out why one method works while another does not.

Here is the working example:

var app = angular.module('plunker', []);

app.factory('data', function () {
  var fac = [];
  var state = false;

  fac.hideIt = function (hide) {
    state = hide;
  };

  fac.hidden = function() {
    return state;
  }

  return fac;
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';
  $scope.hide = data.hidden;
});

app.controller('SecCtrl', function($scope, data) {
  $scope.hideAbove = function () {
    var hide = true;
    data.hideIt(hide);
  };
});

Here is the not working example:

var app = angular.module('plunker', []);

app.factory('data', function () {
  var fac = [];

  fac.hide = {
                state: false, 
                get get() {
                  return this.state
                }, 
                set set(hide) {
                  return this.state = hide;
                }
              };

  return fac;
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';

  $scope.hide = data.hide.get;
});

app.controller('SecCtrl', function($scope, data) {

  $scope.hideAbove = function () {
    var hide = true;
    data.hide.set = hide;
    console.log(data.hide.get)
  }
});

HTML (shared by both)

<body>
    <div ng-controller="MainCtrl">
      <div ng-hide="hide()">
        <p>Hello {{name}}!</p>
      </div>
    </div>

    <div ng-controller="SecCtrl">
      <div ng-click="hideAbove()">CLICK HERE </div>
    </div>  

  </body>

So my question is why does using the getter and setters in the non-working block of code not work?

Here is the working example:

var app = angular.module('plunker', []);

app.factory('data', function () {
  var fac = [];
  var state = false;

  fac.hideIt = function (hide) {
    state = hide;
  };

  fac.hidden = function() {
    return state;
  }

  return fac;
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';
  $scope.hide = data.hidden;
});

app.controller('SecCtrl', function($scope, data) {
  $scope.hideAbove = function () {
    var hide = true;
    data.hideIt(hide);
  };
});

Here is the not working example:

var app = angular.module('plunker', []);

app.factory('data', function () {
  var fac = [];

  fac.hide = {
                state: false, 
                get get() {
                  return this.state
                }, 
                set set(hide) {
                  return this.state = hide;
                }
              };

  return fac;
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';

  $scope.hide = data.hide.get;
});

app.controller('SecCtrl', function($scope, data) {

  $scope.hideAbove = function () {
    var hide = true;
    data.hide.set = hide;
    console.log(data.hide.get)
  }
});

HTML (shared by both)

<body>
    <div ng-controller="MainCtrl">
      <div ng-hide="hide()">
        <p>Hello {{name}}!</p>
      </div>
    </div>

    <div ng-controller="SecCtrl">
      <div ng-click="hideAbove()">CLICK HERE </div>
    </div>  

  </body>

So my question is why does using the getter and setters in the non-working block of code not work?

Share Improve this question asked Aug 8, 2014 at 17:15 allencoded 7,30517 gold badges75 silver badges133 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You should use a service rather than a factory for this. A factory's value is set to the return value of the function you pass to it. There is not really a concept of "this" in a factory ("this" probably points to the window object). "this" in a service points to the service instance.

app.service('data', function () {
  this.state = false;

  this.hide = {
      get value() {
          return this.state;
      },
      set value(hide) {
          this.state = hide;
      }
  };
});

See in your html:

ng-hide="hide()"

The problem is simple you need to change hide property into method inside MainCtrl

$scope.hide = function() {
    return data.hide.get;
}

DEMO

But you will say why the first example worked?

Because in the first example data.hidden does return function literal while the latter example just returns the value from getter.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

angularjs - Javascript GetterSetter in Angular Service with 2 Controllers - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)