AngularJS로 재사용 가능한 HTML 구성 요소를 작성하는 방법

Question

Angular에 새로 입각 한 지금까지, 나는 그것을 좋아하지만 학습 곡선은 꽤 가파르게 보인다. 내가하고 싶은 일은 간단한 비즈니스 로직을 마무리하고 재사용 가능한 DOM 구성 요소를 만들어서 시스템의 공통 영역을 템플릿으로 만드는 것입니다. 특히 다른 질문 유형이있는 간단한 설문 조사 응용 프로그램을 작성하고 있습니다.

<div ng-repeat="question in questions"> 
    <show-question></show-question> 
</div> 

가 이상적으로는 문제 유형을 전환하는 하나 개의 문장으로 모든 로직을 포장 할 : 내 목표는 내가 NG 반복 블록에서 오전 동안 이런 식으로 뭔가를 할 수있는 지점에 도착하는 것입니다 templateUrl에서 다른 HTML 세트를 가져옵니다. 따라서 question.type = "text"이면 "templates/textQuestion.html"의 templateUrl을 가져오고 DOM 요소를 생성 할 때 해당 템플릿 파일에 범위를 삽입 할 수 있습니다.

큰 질문은 내가 정확히이 문제에 대해 모두 다루고 있습니까? 지시어를 사용하는 방법은 있습니까? 지시문/태그 하나로이 모든 작업을 수행해야합니까? 나는 이것에 대해 교육 받고 싶어한다!

올바른 방향으로 가고 있다면, 올바른 구현은 무엇입니까?

IF 및 SWITCH와 같은 지시문에 이미 일부 로직을 넣으려고했지만 유효하지 않습니다.

모든 (건설적인) 도움을 환영합니다.

감사합니다.

Answer 1

지시어입니다. 여기에 전체 가이드가 있습니다. http://docs.angularjs.org/guide/directive

사용자 지정 특성, 요소, CSS 클래스 및 주석을 구성 요소로 변환 할 수 있습니다.

각 질문 유형마다 별도의 템플릿을 가져 오지 않을 것이므로 각 질문 유형마다 다른 지침을 사용하고 싶습니다. 그런 다음 상위 디렉티브를 사용하여 이들 사이를 전환 할 수 있습니다. 당신이 질문의 각 유형에 대한 지침을 가지고 가정

<question ng-repeat="question in questions" type="question.type" ></question> 

: 이제 같은이 사용할 수

app.directive('question', function($compile){ 
    "use strict"; 
    return{ 
    restrict: 'E', 
    replace: true, 
    link: function(scope, element, attrs){ 
     var render = function(){ 
     var template = ""; 
     switch(attrs.type){ 
      case "truefalse": 
      template = '<truefalse></truefalse>'; 
      break; 
      case "multiplechoice": 
      template = '<multiplechoice></multiplechoice>'; 
      break; 
      case "essay": 
      template = '<essay></essay>'; 
      break; 
     } 
     element.html(template); 
     $compile(element.contents())(scope); 
     } 

     attrs.$observe('type', function(value) { 
      render(); 
     }); 
     render(); 
    } 
    }; 
}); 

: 여기

다른 지시를로드하는 지침이 어떻게 보이는지이다 다른 지시어를 렌더링 할 수 있습니다. 이것은 ng-if 또는 다른 템플릿을 사용하는 것과 비슷하지만 재사용 가능한 일회용 구성 요소를 얻었 기 때문에 더 좋아합니다.당신의 범위 변수 질문

$scope.questions = [ 
    { type: 'input', 
    prompt: 'name' 
    } 
]; 

같은 각 질문에 대한 모든 정보가있는 경우

Answer 2

그래서 그럼 당신은

<div question="question" ng-repeat="question in questions"></div> 

과 같은 일부 HTML을 가지고

같은 것을 보이는 지시자가있을 수 있습니다

app.directive('question', function() { 
    return { 
    scope: { 
     question: '=' // Creates 2 way data binding with the object you passed in as attribute by the same name 
    }, 
    link: function($scope, $element, $attrs) { 
     $scope.question; // This will be equal the object you passed in 
     // { type: 'input', prompt: 'name' } 
     // You can modify the dom or whatever here 
    } 
    }; 
}); 

다른 준비된 템플릿을 원한다면 c 당신의 지시

app.directive('question', function($templateCache) { 

에 $ templateCache를 주입 한 다음 링크 기능

link: function($scope, $element, $attrs) { 
    var template = $templateCache.get('path/to/template.html'); 
    // and append it to the element 
    $element.append(template); 
} 

당신은 그것으로 조금 놀러해야 그들을 부르지 만 그 절반 재미 있어요. 행운을 빕니다!