我正在学习有角度的东西,试图找出使用getters / 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>
app.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 objet提供的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
};
因此,当它运行时,它在吸气剂中实际上将指向窗口/全局(在非严格模式下).您可以使用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;
}
}