Angular.js動態加載指令

我是Angular.js開發的新手。我建立一個行走骨架其中：Angular.js動態加載指令

一個頁面，在路由部中定義的控制器，從與所述部件後端檢索的元配置加載到頁（例如 {"component1":"directive1", "component2":"directive2"}）
在視圖中，Angular.js呈現正確指令

概括地說，我想創建所有有關可能由後端選擇了同樣的觀點不同指令的存儲庫。

的視圖：

<div class="row"> 
<div class="{{page.component1}}"> </div> 
<div class="{{page.component2}}"> </div> 
</div>

控制器：

'use strict'; 

angular.module('myApp') 
.controller('PatientListPageCtrl', function ($scope, patientListPage) { 
    $scope.page = patientListPage.getData(); 
});

服務：

'use strict'; 

angular.module('myApp') 
.factory('patientListPage', function ($resource) { 

return $resource('/data/navigation/patientsList.json',{ }, { 
    getData: {method:'GET', isArray: false} 
}); 
});

甲指令：

'use strict'; 

angular.module('myApp') 
.directive('directive1', function() { 
    return { 
     restrict: 'AEC', 
     templateUrl: '../../templates/directives/patientsList.html', 
     controller: 'ListaPazientiCtrl', 
     replace: true 
    } 
});

這樣做，儘管標籤存在，但組件並未顯示在頁面中。

現在，我嘗試了class和ng-class，兩者。在呈現的HTML中，類中有正確的指令，但它呈現爲無效。我認爲Angular.js需要重新遍歷DOM或者重新計算頁面，但是如何去做？

謝謝您的幫助

來源

2014-03-24 davidetrapani

什麼* *究竟是什麼問題？沒有像預期的那樣發生什麼？ –

雖然存在相應的html標記，但組件不顯示在頁面中 – davidetrapani

可能在編譯模板之前觸發該指令。爲什麼不簡單地創建一個通用指令並根據屬性切換模板？ – pasine

指令不能被「動態添加」到現場DOM和預期的工作，因爲你的模板僅編譯一次。如果你想動態地構建一個模板，你當然可以做到這一點，但它與你的DOM單獨做，然後將它綁定到適當的作用域，並手動插入到DOM中。

裏面你的「動態包含」指令，你可以這樣做：

$http(/* ... (load some data) */).success(function (data) { 
    var template = angular.element('<div>') 
     .attr(data.directive.name, data.directive.value); 
    $element.empty().append($compile(template)($scope)); 
});

來源

2014-11-26 13:17:10 hon2a

Angular.js動態加載指令

回答

相關問題