AngularJS — directive $parsing an evaluated expression onto the scope object

Question

I am passing a string to my isolated directive with the @ scope configuration, hoping to be able to get that string as an object on the scope, which could then be assigned a value.

HTML

<div directive model="object.property.property"></div>

JS

directive('directive', function($parse) {
    scope: {
        model: '@' 
    },
    link: function (scope, elem, attrs) {
        var object = $parse(scope.model);
        object(scope);
        scope.object.property.property = 'newstring';
        // scope.object.property.property = 'newstring';
    }
});

I was hoping that this would allow me to get object.property.property onto the scope with a value of newstring.

It doesn't seem that I am using the $parse service correctly, but most of the examples I am finding are related to using $parse to convert JSON. How can I use parse to turn this string into an object on the directive's scope?

Thanks!

are you trying to change the value of model in the directive ? — ngunha02
– ngunha02, Commented Jun 1, 2015 at 22:04
Yes! Once the model is on the scope you could do all kinds of things to it in the linking function. :-) — nikk wong
– nikk wong, Commented Jun 1, 2015 at 22:07
the entire purpose of the @ is to do text binding, not object binding. why can't you use the = in the scope? — Claies
– Claies, Commented Jun 1, 2015 at 23:01
I'm trying to evaluate some items on the parent scope and then add some properties in the attribute, like <div directive model="{{objectFromParent}}.propertyDeclaredHere"> — nikk wong
– nikk wong, Commented Jun 1, 2015 at 23:06

ngunha02 · Accepted Answer · 2015-06-01 22:52:37Z

1

Is this what you are looking for?

app.directive("mainDir", function($parse) {
  return {
     restrict: 'AE',
     scope: {
       model: '@'
     }
    template: '<div> hello: {{model}} </div>',
    link: function(scope, el, attrs) {
       el.on('click', function(evt) {
           evt.stopPropagation();
           evt.preventDefault();
           var object = $parse(attrs.model);
           scope.$apply(function() {
               object(scope);
           });
           object = 'new string';
           scope.model = object;
       })
  }
 }
})

Usage:

<div main-dir model="object.property.property"></div>

edited Jun 1, 2015 at 22:52

answered Jun 1, 2015 at 22:10

ngunha02

1,7291 gold badge19 silver badges25 bronze badges

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

6 Comments

nikk wong Over a year ago

Hm thanks for reaching out! Not exactly. I simply want to make the string object.property.property available on the scope, so that it could be used in the scope to have values etc assigned to it. So if you had <div directive model="object.property.property"></div> you could get scope.object.property.property in the scope or if you had <div directive model="joke"></div> you could get scope.joke available in the scope to assign values to it. :-)

ngunha02 Over a year ago

So you want to dynamically add more properties to the isolated scope object? hmmm, not sure if it is possible tho

nikk wong Over a year ago

Would adding them through html attributes be considered 'dynamic'? Hmm. $parsing doesn't allow properties to be added to the scope object?

ngunha02 Over a year ago

Let say you have a template like this: <div your-directive model="model" other-model="other model" other-model-again="model again"></div> Then in your directive, you will have isolated scope like this: scope : {model : '@', otherModel:'@', otherModelAgain:'@'}

ngunha02 Over a year ago

I don't think you can somehow do like this: scope.push(myOtherModel) then you go to html template and use: <div my-directive myOtherModel="my other model"> </div>

|

Collectives™ on Stack Overflow

AngularJS — directive $parsing an evaluated expression onto the scope object

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related