지시어의 속성을 Angular.js의 드롭 다운에 바인딩하려면 어떻게해야합니까?

Question

$ scope.templates에 바인딩 된 드롭 다운에 일련의 템플릿이 있습니다.

[{"id":1, "name":"Test 1",{"id":2, "name":"Test 2"}].

나는 또한 지시문을 가지고

<editor data-template="1"></editor> 

드롭 다운에서 선택한 템플릿에 따라, 적절한 템플릿 지시문을 다시 렌더링해야한다. 이것이 가능한가? 지금까지 div에 대한 필드의 간단한 일대일 데이터 바인딩 만 보았으며 전체 지시문을 다시 렌더링하지 않았습니다. 이 상황에 가장 적합한 방법은 무엇입니까?

업데이트 : 지시어 $ scope에 대한 기본적인 내용은 컨트롤러 간 양방향 바인딩입니다. 예 : 서비스 개체를 컨트롤러간에 동기화하는 방법을 알아낼 수 없습니다. 내가 정말로하고 싶은 것은 하나의 컨트롤러가 다른 컨트롤러에 사용 가능하도록 변경하고 그 반대의 경우도 마찬가지입니다. http://jsfiddle.net/9gSVn/1/

Answer 1

한 가지 방법은 범위 값이 변경 될 때 html 내용을 대체하는 지시문을 만드는 것입니다. This blog post은 동적 템플릿을 사용하여 지시문을 만드는 단계를 설명하는 데 매우 유용합니다. 모델의 변경을 감시 지시어와

Here is a sample fiddle

는 :

module.directive('template', function() { 
    var getTemplate = function (id) { 
     var template = '<div>no template for ' + id + '</div>'; 

     switch (id) { 
      case 1: 
       template = '<div>template 1 from directive</div>'; 
       break; 
      case 2: 
       template = '<div>template 2 also from directive</div>'; 
       break; 
     } 

     return template; 
    } 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { id: '=templateId' }, 
     link: function (scope, element, attrs) { 
      scope.$watch('id', function (newValue, oldValue) { 
       element.html(getTemplate(newValue)); 
      }); 
     } 
    }; 
});