angularjs - Angular.js 动态加载指令

Question

我对 Angular.js 开发还很陌生。我正在 build 一个行走的骨架，其中:

1. 页面的 Controller ，在路由部分中定义，从后端检索元配置以及要加载到页面中的组件(例如{“组件1”:“指令1”，“组件2”:“指令2”})
2. 在 View 中，Angular.js 呈现正确的指令

简而言之，我想创建一个包含不同指令的存储库，所有指令都与后端可以选择的同一 View 相关。

View :

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

Controller :

'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 或者只是重新计算页面，但该怎么做呢？

感谢您的帮助

Answer 1

指令无法“动态添加”到实时 DOM 中并且无法正常工作，因为您的模板仅编译一次。如果您希望动态构建模板，您当然可以这样做，但要与 DOM 分开进行，然后 $compile将其绑定(bind)到适当的范围，然后手动将其插入到 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));
});