Angularjs directive with bi-directional binding not working

Question

I'm trying to write a simple directive that allows the user to edit a certain variable, but when i try to update the parent variable it doesn't work.

this is my html:

<p class="scene-field-name editable-name" editable="foo"> {{foo}} </p>

and the directive:

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;
            }
        }
    };

here it is in jsfiddle: http://jsfiddle.net/4srx2z0c/2/

you can see that when clicking OK it doesn't save the value back in the parent scope...

Michał Dudak · Accepted Answer · 2015-02-16 07:58:44Z

2

You don't bind the input to tmpValue. Instead of <input type="text" value="{{tmpValue}}" /> you should have <input type="text" ng-model="tmpValue" />.

answered Feb 16, 2015 at 7:58

Michał Dudak

5,0682 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs directive with bi-directional binding not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related