Angular.JS - 是否可以在指令中拥有多个视图？

Question

I'm trying to find out if you can have more than one html file in a directive and then depending on what you pass through the html tag it shows a different HTML layout.

This is something that is required for a accordion that I am building. We want to be able to re-use the directive but sometimes the html will be of a different layout.

So far I believe this can be done by the following:

<accordion data-attr="layout('feedback')></accordion>

Then in the Js check what has been passed and point the accodion to a different view.

The bit I'm unsure about is pointing the accordion directive to a different html file.

Answer 1

You could simply use the ng-include directive in your template:

module.directive('accordion', function() {
  return {
    scope: { type: '&' },
    template: '<div ng-include="type()"></div>'
  };
});

Answer 2

Yes, in your directive you can set your template to be a function that accepts the element and attributes.

.directive('accordion', function() {
  return {
    templateUrl: function(elem, attr){
      return 'layout-' + attr.type + '.html';
    }
  };
});

And use it like:

<accordion type="some-file"></accordion>