angular js two way binding contenteditable via sco

2019-04-14 23:39发布

问题:

Is it not possible to set value from parent scope to contentEditable directive via isolated scope using two-way binding?

Code here: http://jsfiddle.net/bharatwaj/3wTd3/5

HTML:

    <input ng-model="foo" />
    <div contentEditable="true" binding-foo="foo" ng-model="input.name" title="Click to     edit"></div> 
    <pre>model = {{input.name}}</pre>

JS:

    angular.module('form-example2', []).directive('contenteditable', function () {
        return {
        scope: {
            isolatedBindingFoo: '=bindingFoo'
        },
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            console.log('isolatedBindingFoo value is ' + scope.isolatedBindingFoo);
            // view -> model
            elm.bind('blur', function () {
            scope.$apply(function () {
                ctrl.$setViewValue(scope.isolatedBindingfoo);
            });
            });

            // model -> view
            ctrl.$render = function () {
            elm.html(ctrl.$viewValue);
            };

            // load init value from DOM
            // Why is content editable value displayed as Hello!
            // after setting view value below?
            ctrl.$setViewValue(scope.isolatedBindingFoo);
        }
        };
    });

    function ItemCtl($scope) {
         $scope.foo = 'Hello!';
    }

I have a ng-model which is set to 'Hello!' in controller and is two-binding to content editable div

shouldn't contentEditable div display Hello!?

Note: It is possible to set by interpolate like below but i would like to know if it not possible to set via two-binding in scope.

{{foo}}