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?
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?
Share Improve this question asked Aug 8, 2014 at 17:15 allencodedallencoded 7,30517 gold badges75 silver badges133 bronze badges2 Answers
Reset to default 3You 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745186180a4615649.html
评论列表（0条）