我尝试使用需要ngModel
的指令来管理coords对象({x: number, y: number}
)。
我的问题是当我更新我的指令中的值时,一切都可以正常工作,但是数据最初来自的父范围不会更新。
在我的指令中,这里是link
函数的内容(只有管理ngModel的部分):
ngModel.$render = function() {
console.log('render');
scope.top = ngModel.$viewValue.top;
scope.left = ngModel.$viewValue.left;
};
// Transform model value to view value
// We have x, y coords (of the center) and we need to transform them to a top, left position
ngModel.$formatters.push(function(modelValue) {
console.log('> view');
if (modelValue) {
return {
top: modelValue.y - scope.pointer.size / 2,
left: modelValue.x - scope.pointer.size / 2
};
}
return modelValue;
});
// Transform view value into model value
// We have a top, left position and we need to transform them to x, y coords (of the center)
ngModel.$parsers.push(function(viewValue) {
console.log('> model');
if (viewValue) {
return {
x: viewValue.left + (scope.pointer.size / 2),
y: viewValue.top + (scope.pointer.size / 2)
};
}
return viewValue;
});
有一个拖动删除功能可以更改$viewValue
并传播它(当元素被删除时):
scope.$apply(function () {
ngModel.$setViewValue({
top: scope.top,
left: scope.left
});
});
父母的指令调用:
<img-pointer data-ng-repeat="answer in graphicQuestionCtrl.answer"
data-ng-model="answer">
</img-pointer>
graphicQuestionCtrl.answer
中的值似乎永远不会更新。
我已经从指令img-pointer
中删除了隔离范围,因为我已经读过它阻止了父级的更新,但它无法解决问题。