AngularJS directive dynamic model binding to view

Question

I am having following directive:

app.directive('renderPartial', function($compile) {
   return {
      restrict: "AE",
      link: function(scope, element, attrs) {
         var path = getPartial(attrs.module, attrs.file);
         //path = /abc/some_file.html
         scope[attrs.model] = path;
         var el = $compile('<div ng-include="attrs.model"></div>')(scope);
         element.html(el);
      }
   }
});

In my view:

<render-partial module="abc" file="some_file" model="some_model"></render-partial>

Now for some reason this is not working, no errors. But file is not getting rendered.

Plunkr for my problem: http://plnkr.co/edit/CkTE2pV4i5LvL60NEYfE

ping check my updated answer :-P

squiroid
– squiroid

2015-03-25 10:42:35 +00:00
Commented Mar 25, 2015 at 10:42 — squiroid
– squiroid, Commented Mar 25, 2015 at 10:42

squiroid · Accepted Answer · 2015-03-25 10:38:35Z

1

UPDATE

According to plunker attached in the comment:-

You need to do couple of things

1) Use var el = $compile('<div ng-include="'+attrs.model+'"></div>')(scope);

2) element.append(el); instead of plane HTML :-P

Plunker

edited Mar 25, 2015 at 10:38

answered Mar 25, 2015 at 9:38

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

4 Comments

Niraj Chauhan Over a year ago

No, I want this to work: var el = $compile('<div ng-include="scope[attrs.model]"></div>')(scope);

squiroid Over a year ago

I way saying put only value of attrs.model inside your ng-include don't include scop becuase it is a glue b/w view and logic.So, suppose attr.model has 'one' then scope[attrs.model] will turn to scope[one] which is equivaluent to scope.one and in view it will be only 'one'. You don't need scope word in front of it.

Niraj Chauhan Over a year ago

If I try this var el = $compile('<div ng-include="attrs.model"></div>')(scope); still its not working

squiroid Over a year ago

@ntechi can you replicate it in fiddle or plunker ?

Omri Aharon · Accepted Answer · 2015-03-25 10:00:37Z

0

You can make it dynamic, like this:

myApp.directive('renderPartial', function($compile) {
   return {
      restrict: "AE",
      link: function(scope, element, attrs) {
         var path = 'test.html';
         scope.path = path;
         var el = $compile('<div ng-include="path"></div>')(scope);  
         element.append(el);
      }
   }
});

Fiddle

answered Mar 25, 2015 at 10:00

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

1 Comment

Niraj Chauhan Over a year ago

This will not work if I have multiple same directive calls with different files, cause the scope is not array

Collectives™ on Stack Overflow

AngularJS directive dynamic model binding to view

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related