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, Apr 12 '16 at 09:02
Yes i know ng-transclude is for this.But just dont know how to use it for nested divs. — Egomen, Apr 12 '16 at 09:05

MBN · Accepted Answer · 2016-04-12T10:33:45.757

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 '16 at 10:33

answered Apr 12 '16 at 09:24

MBN

1,006
7
17

Thanks again. btw what should i do if i want to use wrapper.html instead of writing html codes into directive ? – Egomen Apr 12 '16 at 09:35

AngularJS Wrapper Html

1 Answers1