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에 추가하는 대신보기를 구동하기 위해 데이터 모델을 사용하지 않는 이유는 무엇입니까? 또한 당신이 jQuery를 사용하지 않는 한'find()'는 클래스 선택자에서 작동하지 않는다. 여기에 많은 잘못이있는 것처럼 보입니다. plunker 데모를 만들 것을 제안하십시오 – charlietfl

또한 $ 요소가 정의 된 곳도 보이지 않습니다 – charlietfl

[생각하는 -에 - jquery - 생각 -에 - jquery - 배경]을 읽을 것을 강력하게 제안합니다 (http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – 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

답변

관련 문제