angularjs custom directive isolated scope one way data binding doesn't work

Question

i am a new to angularjs, I read some literature and followed a lot of tutorials, but i am still have the feeling that i completely confused.

My current issue is with custom directive and isolated scopes. All i trying to do is pass "strings" with @ binding to my directives that use isolated scopes and I can't understand what am i doing wrong. Specifically WHY when i use template everything just works fine and when the template already in the DOM the one way data binding doesn't work.

JSBin fiddle link

major parts from my code:

HTML

<div my-directive my-title="TITLE ONE WAY Data Binding">
  <div>
    <div>This directive is <span style="color:red;">NOT using template</span></div>
    <div>
      $scope.title = <small><pre>{{title}}</pre></small>
    </div>
  </div>
</div>

<div my-directive-with-template my-title="TITLE ONE WAY Data Binding"
  >
  <!-- this directive use a template -->
</div>

JS

var app = angular.module('app', []);

app.directive('myDirective', function() {

  return {
    restrict: 'AE',
    scope:{
      title: "@myTitle"
    },
    link: function(scope, ele, attrs, c) {
      console.log('non template directive link:',scope.title,attrs.myTitle);
    },
    controller:['$scope', function($scope){
        console.log('non template directive controller:',$scope.title);
    }]
  };
});



app.directive('myDirectiveWithTemplate', function() {
  return {
    restrict: 'AE',
    scope:{
      title: "@myTitle"
    },
    link: function(scope, ele, attrs, c) {
      console.log('using template directive link:',scope.title,attrs.myTitle);
    },
    controller:['$scope', function($scope){
        console.log('using template directive link:',$scope.title);
    }],
    template:'<div><div>This directive is using template</div><div>$scope.title = <small><pre>"{{title}}"</pre></small></div></div>',
    replace:true

  };
});

JSBin fiddle link

spacemigas · Accepted Answer · 2014-04-27 12:30:13Z

1

In your non-template scenario the title is not being bound to any scope and therefore not showing anything.

What you call the DOM template is really HTML outside the directive that has no access to it's isolated scope. You could embed this div inside a controller and then title could be bound to the controller's $scope.title

For what I understand it only makes sense to create an isolated scope to make it available to the directive's template.

Clarification

Isolated scopes allow the directive to have state independent of the parent scope (avoiding it's pollution) and also avoiding sharing this state with sibling directives.

Supposing you're creating this directive to reuse that piece of UI somewhere else in your code, you start by creating its template with the shared HTML.

Ok, but you need to go a bit further and parameterize it passing some data to it.

You can then use attributes on the directive to communicate with the outside (parent scope, or just to pass static data).

The directive's template can now bind to this data without needing to have any knowledge of it's "outside world", and it's done through it's isolated scope.

Conclusion, why create an isolated scope, if not to provide the template with this data?

Hope I've made this a bit clear :)

Now after thinking a bit about my affirmation... well you could also create a directive without any template, by using the compile or link function and do it manually through DOM manipulation. And in this case it might make sense to have an isolated scope for the reasons presented above :)

edited Apr 27, 2014 at 12:30

answered Apr 27, 2014 at 11:22

spacemigas

9019 silver badges10 bronze badges

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

2 Comments

arty Over a year ago

thanks for the answer. I was really thinking that (my so called) DOM template has access to the isolated scope of the directive. Can you please explain the last sentence. I haven't understand how / where to bind to the controller. can you post a code or fix my code by cloning my fiddle ? Or you mean to embed the directive inside a controller?

spacemigas Over a year ago

I've made a fix here jsbin.com/gilokixo/5/edit to illustrate what I've meant with embed the div inside a controller. I'll edit my first answer to explain further.

Collectives™ on Stack Overflow

angularjs custom directive isolated scope one way data binding doesn't work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related