我正尝试在使用AngularJS指令的按钮单击上创建手风琴。我有创建手风琴的外部模板。但我无法得到它的工作。下面是代码：Angular指令中的外部模板（templateURL）不起作用

指令：

(function() { 
     'use strict'; 

     angular.module('accountApp') 
     .directive('addSubsite', addSubsite); 
     function addSubsite ($compile, $templateRequest){ 
      var ddo = { 
       restrict: 'A', 
       link: function(scope, element) { 
        element.bind("click", function(e){ 
         $templateRequest("addSubsiteTemplate.html").then(function(html){ 
          var template = angular.element(html); 
          $element.append(template); 
          $compile(template)(scope); 
          $element.find(".add-subsites").append(template); 
         }); 
        }); 
       } 
      }; 
      return ddo; 

     } 
    })();

的index.html

<button add-subsite type="button" class="btn btn-primary pull-right margin10-b"id="aid-addSubSitebtn">Add Sub-Site</button> 
<accordion> 
    <accordion-group> 
<div class="accordion-heading header"> 
       <a class="accordion-toggle" id="primary__site__address" data-toggle="collapse" href="#primary__site"> 
       <h4><span class="pull-left"><i class="icon-minus"></i></span>Business Name (Primary Site)</h4></a>     
      </div> 
     <div class="form-group"> 
    <label for="exampleInputName2">Name</label> 
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
    </div> 
    <button type="submit" class="btn btn-default">Send invitation</button> 
    </accordion-group>  
    </accordion>

Template.html

<accordion> 
     <accordion-group> 
    <div class="accordion-heading header"> 
        <a class="accordion-toggle"data-toggle="collapse" href="#subsite__site"> 
        <h4><span class="pull-left"><i class="icon-minus"></i></span>Business Name (SubSite)</h4></a>     
       </div> 
      <div class="form-group"> 
     <label for="exampleInputName2">Name</label> 
     <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
     </div> 
     <div class="form-group"> 
     <label for="exampleInputEmail2">Email</label> 
     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
     </div> 
     <button type="submit" class="btn btn-default">Send invitation</button> 
     </accordion-group>  
     </accordion>

来源

2017-05-08 dragonfly

你为什么试图将同一个对象追加到一个地方，然后试图将同一个对象追加到一个不存在的类？此外，为什么不使用数据模型来驱动视图而不是手动添加到dom？另外，除非您在角度find（）上使用jQuery，否则无法在类选择器上使用。在这里似乎很多错误。建议你创建一个plunker演示 – charlietfl

也看不到$元甚至定义在哪里 – charlietfl

强烈建议你阅读[thinking-in-angularjs-if-i-have-a-jquery-background]（http://stackoverflow.com /问题/ 14994391 /思维功能于angularjs-IF-I-有-A-jQuery的背景） – charlietfl

我改变了我的方法这里是样品https://jsfiddle.net/2u7aLg5c/

angular.module('testApp',[]) 
.controller('TestController', function(){ 
    const vm = this; 
    vm.inputs=[{}]; 
    vm.myInput = []; 
    vm.add = function(){ 
    vm.inputs.push({}) 
    } 

})

来源

2017-05-10 01:08:51 dragonfly

Angular指令中的外部模板（templateURL）不起作用

的index.html

Template.html

回答

相关问题