Question

我是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或者只是重新计算页面但是如何去做？

感谢您的帮助

Answer 1

指令不能动态添加＆＃34;到实时DOM并期望工作，因为您的模板只编译一次。如果你想动态构建一个模板，你肯定可以这样做，但是要与你的DOM分开，然后$compile它，将它绑定到适当的范围，然后手动将它插入到DOM中。

在您的＆＃34;动态包含＆＃34;指令，您可以执行以下操作：

$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));
});

Angular.js动态加载指令

1 个答案: