Using isolate scope and embedded directive controllers together

2
votes

I have been using directives quite a bit, but I am venturing into building them using isolate scope.

I am having a hard time understanding how isolate scope can be used in combination with a directive controller. It seems as soon as I isolate the scope, the template can no longer access scope functions on the directives controller.

Here is an example:

http://plnkr.co/edit/NWa7nZzjoncKEXwuvSKo?p=preview

I have read about using scope bindings, but it seems that it's supposed to be for interacting with "parent" scope, and I figured that an embedded controller would be a part of the isolated scope.

3
javascriptangularjsangularjs-directiveangularjs-scope
Think long and hard about the word ISOLATE. This is separating the scope for your directive from it's parent scope and creating a new isolated scope. When you do this you need to specify all the things the directive will need to have access to in it's scope property in the directive definition object. As noted below you can use = to two way bind some property, alternatively you could use & if you want the property to execute as a function on the scope it originated from. - shaunhusain

3 Answers

2
votes

This is a hard topic for newcomers. I am going to make a resume here to make you understand it.

When you're doing something like:

<my-directive>
  <button ng-click="doSomething()">Do Something</button>
</my-directive>

Your first thought is that everything inside <my-directive>, in this case the <button> is part of the directive. That is not true.

What is inside, again, the <button> is called transcluded html. That transcluded html has a new scope which have no access to the isolated scope of the directive, in fact they are siblings.

In concrete, there is a controller's scope and from there there are a isolated scope and a new scope for the transcluded html.

So since the transcluded html can't access the isolated scope, that ng-click won't fire at all.

There are workarounds for that.

So in this case, I repeat, doSomething exists on the isolated scope and that button is looking into the new scope of the transcluded html and on its parent (the controller's scope) and it doesn't exist.

The solution that sh3nan1gans gave to you is working, but I wouldn't do that personally.

How does it work? Since it creates a two-way binding with the controller's scope, it creates the new function on the isolated and then it is also created on the parent. Then the button will find that function in that parent scope and then run it.

If you want more information, including the workaround, check here

1
votes

Add the function to your directive in your html:

<my-directive do-something="doSomething">
  <button ng-click="doSomething()">Do Something</button>
</my-directive>

And in your directive file:

scope: {
    doSomething: '='
  }

Updated plunker: http://plnkr.co/edit/0qxipiBvVFEC1huBPGNM?p=preview

1
votes

Because your button was there before you new directive and isolate scope compiled they were assigned to the parent scope not the new scope you are making. If you want your button to be attached to your new scope you would need to use the injectable transclude and linker function to move the html and compile it to your new scope as follows:

angular.module('directives',[]) .directive('myDirective', function(transclude) { return { restrict: 'E', transclude: true, scope: {}, controller: function($scope, $element, $attrs, ctrl, transclude) { transclude(function(clone){ $element.append(clone); $scope.doSomething = function() { alert('I did something'); } }); } } });