我正嘗試在使用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

回答

相關問題