Isolate Scope "=" binding and doted notation AngularJS

Question

How do you create a 2 way binding with a nested property in an isolate scope with dotted notation. I thought 'myObject.data': "=data" would work, but it does not. I don't want to link everything in the myObject object. I know I could do some sort of watch, but 'myObject.data' seems cleaner.

.directive("myDirective", [function() {
    return {
        restrict: "E",
        scope: {
            'myObject.data': "=data"
        },
        link: function (scope, element, attrs) {

            scope.myObject = {
                 data: "myValue"
            };
        }
     };
 }])

mortalapeman · Accepted Answer · 2014-01-13 05:30:02Z

8

Isolated scopes are generally useful only with templates, they should not be used as a way to declare how you want your directive attributes to be interpreted. This is because most directives that don't have a template usually need the semantics of either a child scope or the direct scope of their environment.

In your case, you probably don't even need a $watch, because object references are what enable 2 way data binding, but without your full code I cannot be sure.

In case you want to know the translations for an isolated scope semantics to just a normal one:

@name -> attrs.name
=name -> $scope.$eval(attrs.name);
&name -> function() { return $scope.$eval(attrs.name); }

EDIT 2:

After your comment, I came up with this plunker. To preserve two way data binding you have to use a "." in your ng-model declaration. This is because two way data binding does not work for value types, since they are immutable. You can't change the value of 100 for example. You need to pass around a reference type object and hang the values you are changing off of it. Your desire to specify the full path to the value in the isolated scope definition is not possible based on the principles that two way data binding is made possible by.

Javascript:

angular.module('plunker', [])

.directive('twoWay', function() {
  return {
    restrict: 'E',
    template: '<div><input ng-model="thing.name" type="text" /></div>',
    scope: {
      thing: "="
    }, 
    link: function(scope, element, attrs) {
    }
  };
})

.controller('MainCtrl', function($scope) {
  $scope.data = {
    name: "World"
  };
});

HTML:

  <body ng-controller="MainCtrl">
    <p>Hello {{data.name}}!</p>
    <two-way thing="data"></two-way>
  </body>

edited Jan 13, 2014 at 5:30

answered Jan 12, 2014 at 6:02

mortalapeman

1,42512 silver badges16 bronze badges

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

7 Comments

Warren Over a year ago

The directive has a template with an input element. <input ng-model="myObject.data" ... >. How would you create a 2-way binding with the parent scope with the model of this input element being that it uses dotted notation. I need to keep the isolate scope on the directive.

a better oliver Over a year ago

@user1273184 your comment does not explain why you need an isolate scope. You should put the template and the reasoning behind your approach into the question.

mortalapeman Over a year ago

@user1273184 I've added additional clarification on why your approach to declaring an isolated scope will not work.

Warren Over a year ago

The directive has a lot of code in it. It would just muddy things up. I really am just interested in using dot notation in the declaration of the isolate scope property. Something like this 'myObject.data': "=data". But this does not work. "myObject" has a lot of other properties that do not need to be exposed to the parent scope. I just want myObject.data to be exposed. I know I can work around this, but it just seems cleaner if I can do it the way I have described.

mortalapeman Over a year ago

@user1273184 If myObject.data is a value type, then it is not possible to accomplish what you want with angular. You have to use the extra "." in your template ng-model declaration.

|

david · Accepted Answer · 2015-01-27 12:24:49Z

0

What I use in these cases is the following:

.directive("myDirective", [function() {
    return {
        restrict: "E",
        scope: {
            data: "="
        },
        controller: function($scope){
           $scope.dot = $scope //<--- here is the trick
        } 
     };
 }])

Then you can always change data in the directive's scope from an inherited scope through dot.data = 'whatever' without setting watchers.

Not very elegant but it works jsut fine in cases where you are not using the controller as syntax and don't want a $parent nightmare.

answered Jan 27, 2015 at 12:24

david

1,0447 silver badges8 bronze badges

Collectives™ on Stack Overflow

Isolate Scope "=" binding and doted notation AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related