我正在学习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>
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个问题:
用户1试图直接使用name1对象提供的getter/setter,但它不能正常工作,您能解释为什么吗?
有没有办法避免像用户3那样为每个getter/setter重新编写“代理”,最好的方法是使用外部库提供的getter/setter?
感谢您的帮助。
if (ctrl.$options && ctrl.$options.getterSetter && isFunction(modelValue)) { modelValue = modelValue(); }
基本上,函数引用是modelValue
,它只是在没有上下文的情况下被执行。 它只是被执行的函数引用副本。 当我们在代码片段中使用this
时,我们无法控制执行上下文,这总是问题所在。 - PSL