为了能够看到 contenteditable
的内容变化div 或 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);
};
}};
});
我的测试 Controller 看起来像:
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>
最佳答案
无法绑定(bind) ngModel
直接指向数组中的字符串。您需要在 multiVal
中存储一组对象。 :
$scope.multiVal = [{property: "A"}];
此处演示: http://jsfiddle.net/YMJzN/
顺便说一句,您还需要调整
$scope.addRow
做同样的...$scope.addRow = function() {
$scope.multiVal.push({property:'new'});
}
关于angularjs - 我的 AngularJS 指令有什么问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18754029/