具有双向绑定的Angularjs指令不起作用

时间:2015-02-16 07:45:22

标签: angularjs angularjs-directive

我正在尝试编写一个允许用户编辑某个变量的简单指令,但是当我尝试更新父变量时,它不起作用。

这是我的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/

您可以看到,单击“确定”时,它不会将值保存回父范围...

1 个答案:

答案 0 :(得分:2)

您不会将输入绑定到tmpValue。 您应该<input type="text" value="{{tmpValue}}" />而不是<input type="text" ng-model="tmpValue" />