Angular.js 사용자 지정 지시문이 여러 번 나타나지 않습니다.

Question

Angular.js 지시어가 있습니다. Twitter 부트 스트랩으로 일부 상용구를 줄이기 위해 작성했습니다. 지금까지 form-input 요소를 만들고 예상대로 표시합니다. 그러나 동일한 지시어를 동일한 상위 요소에 배치하면 첫 번째 요소 만 실제로 추가되고 표시됩니다.

누군가가 왜 그런지 밝힐 수 있습니까?

내 마크 업 :

<form class="form-horizontal" role="form"> 
     <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"/> 
     <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"/> 
    </form> 

위에서 언급 한 바와 같이

var app = angular.module('app', ['ui.router']); 


app.controller('FormInputController', ['$scope', '$attrs', function($scope, $attrs){ 
    console.log("Controller"); 
}]); 

app.directive('formInput', function(){ 
    return { 
     restrict: 'E', 
     controller: 'FormInputController', 
     transclude: true, 
     replace: true, 
     require: ['^ngModel'], 
     template: '<div class="form-group">' 
       + '<label for="{{id}}" class="col-sm-2 control-label">{{label}}</label>' 
       + '<div class="col-sm-10">' 
        + '<input type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}">' 
       + '</div>' 
       + '</div>', 
     scope: { 
      id: '@', 
      label: '@', 
      placeholder: '@', 
      type: "@" 
     }, 

     link: function(scope, element, attrs, ctrls) { 
      console.log(arguments); 
     } 
    }; 
}); 

을 app.js는 단지 "덕"입력이 표시됩니다.

Answer 1

지시어에 "자동 닫기"태그를 사용할 수 없습니다. 다음과 같이 당신이 당신의 markup을 변경하면 그것을 작동합니다 :

<form class="form-horizontal" role="form"> 
    <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"></form-input> 
    <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"></form-input> 
</form> 

기본적으로 HTML이 <form-input />를 구문 분석하는 방식은, 가까운 태그없이 오픈 태그로 그래서 첫 번째 지침은 시작했지만 완료되지 않습니다입니다 이유입니다 첫 번째는 작동하는 것처럼 보이지만 두 번째는 작동하지 않습니다.

자세한 내용은 this 및 this을 참조하십시오.