我正在尝试编写一个允许用户编辑某个变量的简单指令,但是当我尝试更新父变量时,它不起作用。
这是我的HTML:
<p class="scene-field-name editable-name" editable="foo"> {{foo}} </p>
和指令:
myApp.directive('editable', function ($window, $compile) {
return {
restrict: "A",
template: '<div class="editable-value" ng-hide="editorOn">{{value}} <a class="edit-a" ng-click="editorOn = true">edit</a></div>' +
'<div class="editable-editor" ng-show="editorOn">' +
'<input type="text" value="{{tmpValue}}" />' +
'<a ng-click="setValue()">OK</a>' +
'</div>',
scope: {
value: "=editable"
},
controller: function($scope) {
$scope.tmpValue = $scope.value;
$scope.editorOn = false;
$scope.setValue = function () {
$scope.value = $scope.tmpValue;
$scope.editorOn = false;
}
}
};
这里是jsfiddle: http://jsfiddle.net/4srx2z0c/2/
您可以看到,单击“确定”时,它不会将值保存回父范围...
答案 0 :(得分:2)
您不会将输入绑定到tmpValue。
您应该<input type="text" value="{{tmpValue}}" />
而不是<input type="text" ng-model="tmpValue" />
。