Question

我对AngularJS很新。我想我已经研究了大部分基础知识。我想创建一种桌面，桌面上显示的项目通过$ http从数据库动态加载。对于我创建了一个包含标题和图标显示的指令的项目。现在我的问题是我不知道如何动态创建指令实例。我的控制器看起来像这样：

$scope.loadItems = function () {
    $http.get('api/StartcenterItems').
    success(function (data) {
        var itemsContainer =  angular.element(document.querySelector("#itemsContainer"));

        for (var i = 0; i < data.length ; ++i) {
            itemsContainer.append('<hl-start-center-item title="Test"></hl-start-center-item>');
        }
    }).
    error(function (data) {
        alert(data);
    });

其中hl-start-center-item是指令。问题是指令的html代码被追加但它不是由Angular编译的，并且不会被浏览器显示。我该怎么做才能正确显示指令？如果您需要更多代码来重现问题，请告诉我。

谢谢你的任何想法，尼古拉斯

Answer 1

我认为这是使用ngRepeat指令的好地方。

在您的主HTML中：

<div id="itemsContainer">
    <div ng-repeat="item in data >
        <hl-start-center-item title="Test"></hl-start-center-item>
    </div>
</div>

只要将结果分配给摘要周期内的数据，就应该通过生成指令来更新。

您的成功功能如下所示：

success(function (data) {
    $scope.data = data;
    }
}).

动态创建指令

1 个答案: