ANGULAR JS動態數據綁定到模板

Question

你好所有的角朋友

我想找到一種方法來動態數據綁定到模板。

創建測試頁面：http://jsbin.com/jiminey/edit?html,js,output。

目前，我有我的HTML

<banner compSrc="banner1"></banner> 
<banner compSrc="banner2"></banner> 

和數據

$scope.bannerData ={ 
    "banner1": { 
    "heading": "Hero Test" 
    }, 
    "banner2": { 
    "heading": "Page Title (h1)" 
    } 
}; 

模板

template: '<div>BannerHeading - {{bannerData.banner2.heading}}</div>' 

我怎樣才能使這個模板動態的基礎上，compSrc屬性？

我在找類似下面的東西所以我沒有更新模板。

template: '<div>BannerHeading - {{heading}}</div>' 

謝謝。

Answer 1

您可以使用隔離餘地指令。考慮名稱規範化。

這裏是固定的JSBin

Answer 2

創建模板指令，並使用function作爲價值DDO 你的編譯性能PLZ是指在SO這個問題：What are the benefits of a directive template function in Angularjs?

app.directive('myDirective', function(){ 
     return { 

     // Compile function acts on template DOM 
     // This happens before it is bound to the scope, so that is why no scope 
     // is injected 
     compile: function(tElem, tAttrs){ 

      // This will change the markup before it is passed to the link function 
      // and the "another-directive" directive will also be processed by Angular 
      tElem.append('<div another-directive></div>'); 

      // Link function acts on instance, not on template and is passed the scope 
      // to generate a dynamic view 
      return function(scope, iElem, iAttrs){ 

      // When trying to add the same markup here, Angular will no longer 
      // process the "another-directive" directive since the compilation is 
      // already done and we're merely linking with the scope here 
      iElem.append('<div another-directive></div>'); 
      } 
     } 
     } 
    });