我正在学习 Angular，我正在尝试找出使用 getter/setter 的最佳解决方案。
说，我正在使用一个公开 getter 和 setter 的库(就像 Moment.js 所做的那样)。
我已经尝试了几种方法来处理 getter 和 setter，它们是:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-ngModel-getter-setter-production</title>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"> </script>
<script src="app.js"></script>
</head>
<body ng-app="getterSetterExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name :
<input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" />
<br/>Name1:
<input type="text" name="userName1" ng-model="user1.name" ng-model-options="{ getterSetter: true }" />
<br/>Name2:
<input type="text" name="userName2" ng-model="user2.name" ng-model-options="{ getterSetter: true }" />
<br/>Name3:
<input type="text" name="userName3" ng-model="user3.name" ng-model-options="{ getterSetter: true }" />
</form>
<pre>user.name = <span ng-bind="user.name()"></span>
</pre>
<pre>user1.name = <span ng-bind="user1.name()"></span>
</pre>
<pre>user2.name = <span ng-bind="user2.name()"></span>
</pre>
<pre>user3.name = <span ng-bind="user3.name()"></span>
</pre>
</div>
</body>
</html>
应用程序.js
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
var _name = 'Brian';
var _name3 = 'Joe';
var name1 = {
_name: 'George',
name:function(newName) {
if (angular.isDefined(newName)) {
this._name = newName;
}
return this._name;
}
};
var name2 = {
_name: 'Michael',
name:function(newName) {
if (angular.isDefined(newName)) {
this._name = newName;
}
return this._name;
}
};
var name3 = {
name:function(newName) {
if (angular.isDefined(newName)) {
_name3 = newName;
}
return _name3;
}
};
$scope.user = {
name: function(newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name;
}
};
$scope.user1 = {
name: name1.name
};
$scope.user2 = {
name: function(newName) {
return name2.name(newName);
}
};
$scope.user3 = {
name: name3.name
};
}
]);
您可以在这里尝试:http://plnkr.co/edit/S1qKre9umNpLOt0sjpZf?p=preview
2 个问题:
user1 尝试直接使用 name1 对象提供的 getter/setter，它不能正常工作，你能解释为什么吗？
有没有办法避免像我在 user3 中那样为每个 getter/setter 重写“代理”？使用外部库提供的 getter/setter 的最佳方法是什么？
谢谢你的帮助
最佳答案
user1 tries to direcly use the getter/setter provided by the name1 objet, it doesn't work properly, can you explain why?
问题出在上下文上，您只是通过以下操作复制函数引用 name1.name:-
$scope.user1 = {
name: name1.name
};
所以当它运行时，getter 中的 this 实际上会指向 window/global(在非严格模式下)。您可以使用 Function.bind 解决此问题.
例子:-
$scope.user1 = {
name: name1.name.bind(name1)
};
Is there a way to avoid to rewrite a "proxy" for each getter/setter as I've done in user3?
我只想创建一个包装器，这样我就不会遇到像这样的上下文问题。
$scope.user = getModel('name', 'Brian');
$scope.user1 = getModel('name', 'George');
$scope.user2 = getModel('name', 'Michael');
$scope.user3 = getModel('name', 'Joe');
$scope.address = getModel('address');
//You can improve this by passing an optional getter functionality as well for some specific evaluation on the value when set.
function getModel(propertyName, defValue) {
var obj = {};
obj._defVal = defValue;
obj[propertyName] = function(newVal){
if (angular.isDefined(newVal)) {
obj[prop] = newVal;
}
return obj[prop];
}
return obj;
}
}
或者只是
function getModel(propertyName, defValue) {
var obj = {};
var propValue = defValue;
obj[propertyName] = function(newVal){
if (angular.isDefined(newVal)) {
propValue = newVal;
}
return propValue;
}
return obj;
}
}
关于javascript - AngularJS getter / setter ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25452989/