Question

我在服务层中搞乱了javascript getter和setter。我正在使用2个控制器。第一个控制器只显示一些文本。第二个控制器允许隐藏它。我试图弄清楚为什么一种方法有效，而另一种方法没有。

以下是工作示例：

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);
  };
});

这是不可行的例子：

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（由两者共享）

<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>

所以我的问题是为什么在非工作代码块中使用getter和setter不起作用？

Answer 1

您应该使用服务而不是工厂。工厂的值设置为传递给它的函数的返回值。没有真正的概念＆＃34;这个＆＃34;在工厂（＆＃34;这＆＃34;可能指向窗口对象）。＆＃34;这＆＃34;在服务中指向服务实例。

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

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

Answer 2

请参阅你的html：

ng-hide="hide()"

问题很简单，您需要将hide属性更改为MainCtrl

中的方法

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

DEMO

但你会说为什么第一个例子有效？

因为在第一个例子中data.hidden确实返回了函数文字，而后一个例子只返回了getter中的值。

带有2个控制器的角度服务中的Javascript Getter / Setter

2 个答案: