2

为了能够观察contenteditablediv 或input元素的内容变化，我创建了以下指令：

app.directive('contenteditable',function() { return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        // view -> model
        element.bind('input', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(element["0"].tagName=="INPUT" ? element.val() : element.text());
                scope.watchCallback(element.attr('data-ng-model'));
            });
          });
        // model -> view
        ctrl.$render = function() {
            element.text(ctrl.$viewValue);
            element.val(ctrl.$viewValue);
        };
     }};
});

我的测试控制器看起来像：

function TestController($scope) {
    $scope.singleVal = "X";
    $scope.multiVal = ["A"];
    $scope.addRow = function() {
        $scope.multiVal.push("");
    };
    $scope.watchCallback = function(modelName) {
        console.log(modelName+" was changed");
    }; 
}

当我针对以下 html 对其进行测试时，singleVal（静态创建）表现良好，但我的 multiVal（使用 ng-repeat 动态创建）却没有。当我输入一个值时，它只保留原始值（即模型没有被刷新）。请帮忙。

<div data-ng-controller="TestController">
    <div contenteditable="true" data-ng-model="singleVal"></div>
    <button data-ng-click="addRow()">Add Row</button>
    <table data-ng-repeat="val in multiVal"><tr><td>
        <div contenteditable="true" data-ng-model="val"></div>
    </td></tr></table>
</div>
4

1 回答 1

3

您不能ngModel直接绑定到数组中的字符串。您需要在其中存储一组对象multiVal：

$scope.multiVal = [{property: "A"}];

在这里演示：http: //jsfiddle.net/YMJzN/

顺便说一句，你也需要调整$scope.addRow做同样的事情......

$scope.addRow = function() {
    $scope.multiVal.push({property:'new'});
}
于 2013-09-12T02:43:28.487 回答