AngularJS 包装纸 Html

Question

我在我的视图中使用相同的 div，但在 div 内部 changing.So 我想在指令中使用它。这是什么方法？例子;

<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>

所以我想把这部分作为指令；

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

你能帮忙吗？

Answer 1

使用这个：

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

和脚本（更新：加载html文件而不是内联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

AngularJS 包装纸 Html

AngularJS Wrapper Html

directive

angularjs