Angularjs 双向绑定指令不起作用

Question

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

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

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

Answer 1

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

Angularjs 双向绑定指令不起作用

Angularjs directive with bi-directional binding not working

angularjs

angularjs-directive