scope.$eval doesn't work in angular.js directive

Question

I want to build a angular.js directive, which by clicking the <span>, it will turn out into a editable input. and the following code works well, except when the model is empty or model length has 0, make it show <span> EMPTY </span>.

  <span  ng-editable="updateAccountProfile({'location':profile.location})" ng-editable-model="profile.location"></span> 

app.directive('ngEditable', function() {
    return {
        template: '<span class="editable-wrapper">' + '<span data-ng-hide="edit" data-ng-click="edit=true;value=model;">{{model}}</span>' + '<input type="text" data-ng-model="value" data-ng-blur="edit = false; model = value" data-ng-show="edit" data-ng-enter="model=value;edit=false;"/>' + '</span>',
        scope: {
            model: '=ngEditableModel',
            update: '&ngEditable'
        },
        replace: true,
        link: function(scope, element, attrs) { 

           var value = scope.$eval(attrs.ngEditableModel);
           console.log('value ' , attrs.ngEditableModel , value);
           if (value == undefined || (value != undefined && value.length == 0)) {
             console.log('none');
             var placeHolder = $("<span>");
             placeHolder.html("None");
             placeHolder.addClass("label");
             $(element).attr("title", "Empty value. Click to edit.");
           }


            scope.focus = function() {
                element.find("input").focus();
            };
            scope.$watch('edit', function(isEditable) {
                if (isEditable === false) {
                    scope.update();
                } else {
                    // scope.focus();
                }
            });
        }
    };
});

the problem occurs at the this part of code that

    var value = scope.$eval(attrs.ngEditableModel);
    console.log('value ' , attrs.ngEditableModel , value);

attrs.ngEditableModel output the content 'profile.location', but then using scope.$eval() only output ' undefined ', even model 'profile.location' is not null

please use code snippet so we could see the working version of your code.(go to edit mode and then you could use Ctrl + M) — Lrrr
– Lrrr, Commented Sep 20, 2014 at 15:12
why are you using scope.$eval on an attribute which already assigned its value to your scope's model variable? — Yaron Schwimmer
– Yaron Schwimmer, Commented Sep 20, 2014 at 16:40

MMM · Accepted Answer · 2014-09-20 17:28:15Z

6

You have two ways to fix that.

1) You're calling $eval on the wrong scope. You have in scope in your link function your newly created isolated scope. attrs.ngEditableModel does contain a reference to the outer scope of your directive, which means you have to call $eval at scope.$parent.

scope.$parent.$eval(attrs.ngEditableModel)

or 2) a better way to handle it: You already have bound ngEditableModel via your scope definition of

scope: {
    model: '=ngEditableModel',

So, instead of using your own $eval call, you can just use scope.model which points to the value of attrs.ngEditableModel. This is already two-way-bound.

answered Sep 20, 2014 at 17:28

MMM

8,4794 gold badges37 silver badges36 bronze badges

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

1 Comment

user824624 Over a year ago

it is strange that when console.log(scope), I could see scope.model value in the console, but when console.log(scope.model), outputs undefined.

Collectives™ on Stack Overflow

scope.$eval doesn't work in angular.js directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related