吸气和放大器;在AngularJs NG-模型制定者支持 [英] Getter & setter support with ng-model in AngularJs
问题描述
我试图通过实现一个指令，将采取获取和从视图/模型的值设置为/护理能为NG-模型的getter / setter支持。我几乎没有，但我在无限$消化循环结束了。
I am trying to get getter/setter support for ng-model by implementing a directive that will take care of getting and setting the values to/from the view/model. I am almost there, but I end up in infinite $digest loops.
我们的想法是设定NG-模式=$ someFieldToStoreInTheScope，然后让的getter / setter指令做场和的getter / setter函数之间的更新。
The idea is to set ng-model="$someFieldToStoreInTheScope", and then have the getter/setter directive do the updates between that field and the getter/setter functions.
我用$看使用二传手前pression当ngModelController更新范围的现场更新模型，另一个手表更新字段时，吸气剂前pression变化。
I use $watch to update the model using the setter expression when the ngModelController updates the field in the scope, and another watch to update that field when the getter expression changes.
有一个看看： http://jsfiddle.net/BDyAs/10/
HTML：
<div ng-app="myApp">
<body>
<form name="form">
<input type="text" ng-model="$ngModelValue" ng-model-getter-setter="get=getValue();set=setValue($value)"/> {{myDerivedValue}}
</form>
</body>
</div>
JS：
var myApp = angular.module('myApp', []);
myApp.directive(
{
'ngModelGetterSetter': function () {
return {
require: "ngModel",
controller: ctrl,
link: function(scope, element, attrs, ngModelCtrl)
{
var getterSetterExpression = attrs.ngModelGetterSetter;
var tokens = getterSetterExpression.split(";");
var getExpression = tokens[0].split("=")[1];
var setExpression = tokens[1].split("=")[1];
function updateViewValue()
{
var updateExpression = attrs.ngModel + "=" + getExpression;
scope.$eval(updateExpression);
}
function updateModelValue()
{
scope.$value = ngModelCtrl.$viewValue;
scope.$eval(setExpression);
}
updateViewValue();
scope.$watch(getExpression, updateViewValue);
scope.$watch(attrs.ngModel, updateModelValue);
}
};
}
});
function ctrl($scope) {
$scope.getValue = function ()
{
return $scope.myValue;
}
$scope.setValue = function (val)
{
$scope.myValue = val;
$scope.myDerivedValue = $scope.myValue * 2;
}
$scope.setValue(5);
setInterval(function () { $scope.setValue($scope.getValue() + 1); $scope.$apply(); }, 1000);
}
我已经把一个的setInterval（）在我的code修改模型，看看它是否在视图中正确传播。
I have put a setInterval() in my code to modify the model and see if it propagates correctly in the view.
任何想法，为什么有一个无限循环消化，以及如何去除呢？
Any idea why there is an infinite digest loop, and how to remove it?
推荐答案
注意 AngularJs 1.3现在支持NG-模型的getter / setter。请参阅 http://docs.angularjs.org/api/ng/directive/ngModelOptions了解更多信息。
NOTE AngularJs 1.3 now supports Getter/Setter for ng-model. Refer to http://docs.angularjs.org/api/ng/directive/ngModelOptions for more information.
我能打破额外调用
ngModelCtrl.$setViewValue()
和
ngModelCtrl.$render()
在事件处理程序。如果是这样做，虽然最好的办法不知道。
in the event handlers. Not sure if it's the best way to do it though.
请参阅小提琴： http://jsfiddle.net/BDyAs/12/
编辑：
我提高了code更是在
I improved the code even more in
通过分离在getter和setter方法单独的人的指令。
by separating the directive in separate ones for the getter and the setter.
这篇关于吸气和放大器;在AngularJs NG-模型制定者支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
