AngularJS : Isolated Scope in directive with Compile in directive

Question

I am struggling to get access to an isolated scope from some html I am building in the compile function of a directive. I have a SIMPLE example, the one I am working with is much more complex. Essentially I can't access properties on the isolated scope. Here is the code.

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

It's odd to me because the in the console the scope looks great, from the post function.

Notice how the html is set up in the compile function: tElement.append(angular.element('<div>{{name}}</div><span>{{value}}</span><span>Hello</span>'))

Also notice the second directive, Here with an inherited scope everything works fine.

Edit: I updated the first directive(The directive that isn't working) to set a property in the html so I could look for it in the console when I log the scope. It turns out it is on the $parent scope (The property is named "wat"). But why? It makes sense why it wouldn't work, but I don't understand why that html doesn't have access to the same isolated scope? Is there a way to force the html I am inserting to use the isolated scope instead?

Edit 2: Ok so a lot of questions about why I am trying to do this, the best description could be found here. https://github.com/angular/angular.js/issues/7874. Essentially we wanted to ng-repeat some transcluded content, and expose the item from ng-repeat to the transcluded content, but you can't do that in angular, because the transcluded content only has access to the parent scope.

The goal is to get the first directive to work like the second, in that the value of the two properties (value, and name) work from appending html in the compile function, with an isolated scope.

what is what you're trying to achieve ? what is your desired output ? — Gonzalo.-
btw, if you inject $scope in your controller it will work fine app.controller('MainCtrl', function($scope) { $scope.name = "Hello" }); — Gonzalo.-
Yea wft, your right. That is stupid, especially since angular is pushing for developers to us this inside of controllers, and providing named instances of controllers in the views. — Thomas Florin

LiamRyan LiamRyan · Accepted Answer · 2015-06-22T17:25:03

This is how I would go about what ( I think ) you are trying to achieve

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

By using a template with transclude: true and a link function you can achieve the desired result as you replace the element with your template while interpreting the angular expressions

You could use replace: true to further customise your directive

app.directive('widget',function(){
  return {
    restrict:'E',
    transclude: true,
    template: '<span ng-bind="wat=\'YES\'"></span><div>{{name}}</div><span>{{value}}</span>&nbsp;<span>There</span>',
    scope:{
      name:'@',
      value:'='
    },
    link:function($scope, tElement){
    }
  }
});

AngularJS : Isolated Scope in directive with Compile in directive

1 Answers