robe007 robe007 - 6 months ago 8
Javascript Question

How to '$parse' a scope object in a directive passing the entire object

If I have this controller:

myApp.controller('ctrl', function ($scope) {
$scope.obj = {
name: "John",
lastname: "Preston"
}
});


with this html

<body ng-controller="ctrl">
<div my-attr="obj" my-directive>Click here</div>
<pre>{{obj | json}}</pre>
</body>


I want to change the value of
lastname
in a directive with $parse. I know that if I pass the object property like this:

<div my-attr="obj.lastname" my-directive>Click here</div>


This directive do the work:

myApp.directive('myDirective', function( $parse, $log ) {
return function( scope, el, attrs ) {

var model = $parse( attrs.myAttr );

$log.log( model(scope) );

el.bind('click', function() {
model.assign(scope, "Watts");
scope.$apply();
$log.log( model(scope) ); // Now here obj.lastname is Watts
})
}
});


But how could be the code inside the directive without passing the property? I mean, like this:
my-attr="obj"

Answer

Ok, I found 2 ways to get this:

1) $parse (my favorite)

I just got it using: $parse( 'obj.lastname' ); on this way:

The html:

<div my-directive>Click here</div>

The directive:

myApp.directive('myDirective', function( $parse, $log ) {
    return function( scope, el, attrs ) {

        var model = $parse( 'obj.lastname' );

        $log.log( model(scope) );

        el.bind('click', function() {
            model.assign(scope, "Watts");
            scope.$apply();
            $log.log( model(scope) ); // Now here obj.lastname is Watts
        })
    }
});

2) $eval (interesting)

The html:

<div my-attr="obj" my-directive>Click here</div>

The directive:

myApp.directive('myDirective', function( $parse, $log ) {
    return function( scope, el, attrs ) {

        var model = scope.$eval(attrs.myAttr);

        $log.log( model );

        el.bind('click', function() {
            model.lastname = 'Watts';
            scope.$apply();
            $log.log( model ); // Now here obj.lastname is Watts
        })
    }
});

Any other ideas?

Comments