javascript - AngularJs - 重新绑定(bind) ng-model

Question

所以我的用例是:

cols = [{field="product.productId"},{field="product.productPrice"}];

数据 = {产品:[{产品:{productId:1，productPrice:10}，{产品:{productId:2，productPrice:15}}]}

我想做的是:

<div ng-repeat="product in data.products">
<div ng-repeat="col in cols">
<input type="text" ng-model="product[col.field]"></>
</div>
</div>

现在，如果 col.field 只是“someField”而不是“some.deep.field”，那么这将起作用。因为该字段有很多元素，所以如果我不想通用并允许更改我的数据和列，那么执行 ng-model 的正确方法将是“product[some][deep][field]”。我尝试过这种方法，它适用于非通用用例。

我试图使其通用:

1. 重新编译我的“输入”元素。这创建了完美的 HTML E.G，它上面有 ng-model="product['some']['deep']['field']"，但字段绝不是绑定(bind)的。也许我在这里使用错误的范围进行编译？我已经尝试过添加属性 ng-init="hello='Hey'"ng-model="hello"此时它工作并正确绑定(bind)......所以我觉得我在这里遗漏了一些关于范围的东西。

   compile: function (templateElement) {
       templateElement[0].removeAttribute('recursive-model');
       templateElement[0].removeAttribute('recursive-model-accessor');
       return {
           pre: function (scope, element, attrs) {
               function convertDotToMultiBracketNotation(dotNote) {
                   var ret = [];
                   var arrayOfDots = dotNote.split('.');
                   for (i = 0; i < arrayOfDots.length; i++) {
                       ret.push("['" + arrayOfDots[i] + "']");
                   }
                   return ret.join('');
               }
   
               if (attrs.recursiveModel && attrs.recursiveModelAccessor) {
                   scope[scope.recursiveModel] = scope.ngModel;
                   element[0].setAttribute('ng-model', scope.recursiveModel + convertDotToMultiBracketNotation(scope.recursiveModelAccessor));
                   var res = $compile(element[0])(scope);
                   console.info('new compiled element:', res);
                   return res;
               }
           }
       }
   }
   

2. 使用 NgModelController 进行格式化和解析。在这种情况下，我已将整个“行”对象放入 ng-model 中，然后使用格式化程序/解析器仅干扰我感兴趣的 1 个字段。这将一直有效，直到您清除该字段。到那时，它似乎完全消除了 modelCtrl.$modelValue 。换句话说 - 我的 console.log 说:

Setting field to val 'Text' on row [object]

Setting field to val 'Tex' on row [object]

Setting field to val 'Te' on row [object]

Setting field to val 'T' on row [object]

Setting field to val '' on row [object]

Setting field to val 'A' on row undefined

    link: function (scope, element, attrs, ctrls) {
        if(ctrls[2] && scope.recursiveModelAccessor){
     var modelCtrl = ctrls[2];
            modelCtrl.$formatters.push(function (inputValue) {
                function getValue(object, string){
                    var explodedString = string.split('.');
                    for (i = 0, l = explodedString.length; i < l; i++) {
                        object = object[explodedString[i]];
                    }
                    return object;
                };

                function getValueRecursive (row, field) {
                    if (field instanceof Array) {
                        var ret = [];
                        for (var i = 0; i < col.field.length; i++) {
                            ret.push(getValue(row, field[i]));
                        }
                        return ret.join('/');
                    } else {
                        return getValue(row, field);
                    }
                };

                return getValueRecursive(modelCtrl.$modelValue, scope.recursiveModelAccessor);
            });
            modelCtrl.$parsers.push(function (inputValue) {
                function setValueRecursive (row, field, newValue) {
                    if (field instanceof Array) {
                        var firstField = field.shift();
                        if(field.length==1){
                            field = field[0];
                        }
                        setValueRecursive(row[firstField], field, newValue);
                    } else {
                        console.log("Setting "+field+" to val:"+newValue+" on row:"+row);
                        row[field]=newValue;
                    }
                };

                setValueRecursive(modelCtrl.$modelValue, scope.recursiveModelAccessor.split('.'), modelCtrl.$viewValue);

                return modelCtrl.$modelValue;
            });

Answer 1

长话短说(在这方面浪费了 8 个小时) - 如果您打算在修改 ng-model 属性后重新编译，请不要将 ng-model="something"放在您的对象上。

用于重新绑定(bind) ngModel 的工作指令(只是您的对象上没有该属性!)

<div ng-repeat="product in data.products">
<div ng-repeat="col in cols">
<input type="text" recursive-model="product" recursive-model-accessor="some.deep.field"></input>
</div>
</div>

只要确保你没有 ng-model="something"。

当然 - 如果 ng-model 属性存在，100% 完美的解决方案会抛出异常:)

module.directive('rebindModel',  ['$compile','$parse',function($compile,$parse){
return {
    restrict:'A',
    compile: function (templateElement) {
        templateElement[0].removeAttribute('recursive-model');
        templateElement[0].removeAttribute('recursive-model-accessor');

        return {
            post: function (scope, element, attrs) {
                function convertDotToMultiBracketNotation(dotNote) {
                    var ret = [];
                    var arrayOfDots = dotNote.split('.');
                    for (i = 0; i < arrayOfDots.length; i++) {
                        ret.push("['" + arrayOfDots[i] + "']");
                    }
                    return ret.join('');
                }

                if (attrs.recursiveModel && attrs.recursiveModelAccessor) {
                    var parsedModelAccessor = $parse(attrs.recursiveModelAccessor)
                    var modelAccessor = parsedModelAccessor(scope);

                    element[0].setAttribute('ng-model', attrs.recursiveModel + convertDotToMultiBracketNotation(modelAccessor));
                    var res = $compile(element[0])(scope);
                    return res;
                }
            }
        }
    },
}
}]);