CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-transclude
Lukas Chen
Lukas Chen

Reputation: 383

Transcluded isolate directive controller model not accessible in the view

!!!!!!!!!! Old Question

Just look at the code (Outdated). The isolated directive with template works, but the one accessing it in the view doesn't.

The New One

I use the same plunk and I have listened to @Andrew Eisenberg suggestion to use transclution in my directive however it is still not working.

HTML

<p isolate-with-template></p>
<p isolate-with-transclude>Hello World {{vm.hi}}</p>

JS

angular.module('app',[])
.directive('isolateWithTemplate',function() {
  return {
    restrict: 'A',
    controllerAs: 'vm',
    scope:{},
    controller: function ($scope) {
      var vm = this;
        vm.hi = "hi";
    },
    template: "{{vm.hi}}"
  }
})
.directive('isolateWithTransclude',function() {
  return {
    restrict: 'A',
    controllerAs: 'vm',
    scope: {},
    transclude: true,
    template: "<div ng-transclude></div>",
    controller: function ($scope) {
      var vm = this;
        vm.hi = "hi";
    }
  }
})

Upvotes: 1

Views: 108

Answers (2)

Andrew Eisenberg
Andrew Eisenberg

Reputation: 28757

The problem is that when you add content inside of a directive that is not transcluded, that content is overwritten by the directive.

In the case of your directive without a template, all of its content is simply removed. You can see this if you just replace {{vm.hi}} with any arbitrary text and you will see that it doesn't show either.

If you wanted to include vm in the view, you would need to transclude it by adding the transclude property to the directive definition. You would also need to add a template, but it could be empty. More information on how to use transclude is available in the angular docs.

Upvotes: 2

Rohit Shedage
Rohit Shedage

Reputation: 25920

replace scope: {}, to scope: true, in isolateWithoutTemplate

Upvotes: 0

Related Questions