AngularJS Wrapper Html

Question

I am using same divs in my view but inside of divs are changing.So I want to make it in a directive. What is the way for this? Example;

<div id="firstDiv">
  <div id="secondDiv">
     <div id="thirdDiv">
      <label....>
     </div>
  </div>
</div>

<div id="firstDiv">
  <div id="secondDiv">
     <div id="thirdDiv">
      <select....>
     </div>
  </div>
</div>

<div id="firstDiv">
  <div id="secondDiv">
     <div id="thirdDiv">
      <textArea....>
     </div>
  </div>
</div>

So i want to make this part as a directive ;

   <div id="firstDiv">
      <div id="secondDiv">
         <div id="thirdDiv">
         </div>
      </div>
   </div>

Can you help ?

Directives are used only when you have a similar structure with similar models but each might change independently, like instance of some class. The model of each will be same in directive but might or might not change the values of others. What you are asking seems vague in this scenario. — Deadpool
– Deadpool, Commented Apr 12, 2016 at 9:02
Yes i know ng-transclude is for this.But just dont know how to use it for nested divs. — Egomen
– Egomen, Commented Apr 12, 2016 at 9:05

MBN · Accepted Answer · 2016-04-12 10:33:45Z

1

Use this:

<my-wrapper>
  Your content here
</my-wrapper>

And script (UPDATED: Load html file instead inline html):

module.directive('myWrapper', function ($http, $compile) {
    var linker = function (scope, element, attrs) {

          $http.get('wrapper.html').success(function (data) {
             element.replaceWith($compile(data)(scope));
          });

    };

    return {
        restrict: 'E',
        link: linker
    };
});

JSFiddle

edited Apr 12, 2016 at 10:33

answered Apr 12, 2016 at 9:24

MBN

1,0048 silver badges19 bronze badges

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

1 Comment

Egomen Over a year ago

Thanks again. btw what should i do if i want to use wrapper.html instead of writing html codes into directive ?

Collectives™ on Stack Overflow

AngularJS Wrapper Html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related