如何將指令的屬性綁定到Angular.js中的下拉列表中？

Question

我在下拉菜單中有一系列模板綁定到$ scope.templates：

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

我也有一個指令，

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

根據在下拉列表中選擇的模板，它應該重新渲染相應的模板的指令。這可能嗎？迄今爲止，我只看到了簡單的一對一的數據綁定字段，並沒有觸發整個指令的重新渲染。這種情況的最佳方法是什麼？

更新：指令$ 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)); 
      }); 
     } 
    }; 
});