吸气和放大器;在AngularJs NG-模型制定者支持制定者、放大器、模型、NG

2023-09-13 04:33:46 作者：求佛不如拜我

我试图通过实现一个指令，将采取获取和从视图/模型的值设置为/护理能为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?