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动态加载指令

回答

相关问题