Angular ng-repeat 不会迭代包含 html 的字符串项数组答案

【问题标题】：Angular ng-repeat does not iterate over array of string items containing htmlAngular ng-repeat 不会迭代包含 html 的字符串项数组
【发布时间】：2015-11-29 21:45:59
【问题描述】：

我有一个 div，我想在其中放置带有文本的复选框。

我正在从数据库中获取此文本，并将我想要的 html 格式和文本添加到 javascript 中的数组中：

var textHtmlElement = '<label class="smallPadding"><input type="checkbox">' + text + '</label>';
textList.splice(textList.length , 0, textHtmlElement);

从函数返回的titles数组然后被分配一个$scope变量：

$scope.list = service.getTextList();

但是，当我尝试对该数组进行 ng-repeat 时，复选框和文本不会显示。

<div class="checkbox" ng-repeat="item in list">
    {{ item }}
</div>

在将作用域记录到控制台时，有一个名为list 的作用域变量：console.log($scope)。我发现奇怪的是，当我登录 console.log($scope.list) 时，它显示一个空数组......如果我明确地做 $scope.list = ['1', '2', '3']，ng-repeat 工作，所以我猜问题出在这一行 $scope.list = service.getTextList();

我应该如何解决这个问题？

编辑我的服务中的 getTextList() 函数：

getTextList: function(){
    return textList;
}

编辑 2 我获取数据并返回文本列表的服务：

app.service('service', function() {
    var textList = [];

    return {
        getTextList: function(){
            return textList;
        },
        dataQuery: function() {
            var text = "";
            . 
            . 
            .
            query.find({
                success: function (results) {
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        text = " " + object.get('text');
                        textList.splice(textList.length , 0, text);
                    }
            . 
            . 
            .

我的html：

<div class="checkbox" ng-repeat="item in list">
    <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

我的控制器保持不变 - 尽管分配给 $scope.list 变量的数组不包含 html。正如建议的那样，这只是数据。首先，我在服务中调用 dataQuery 函数，然后调用 getTextList 函数。

编辑 3 工作代码。我在$scope.list = service.getTextList(); 周围添加了以下内容：

$timeout(function(){
    $scope.list = service.getTextList();
}, 150);

150 毫秒的超时使查询有时间完成获取将分配给 $scope.list 变量的数据。

【问题讨论】：

第一个sn-p代码在哪里？
它在我进行数据库查询的服务中。
那么，你诊断出问题出在service.getTextList(); 那你为什么不把getTextList() 的代码贴出来呢？另外，你这样做是完全错误的。 HTML 应该由视图生成，而不是由服务生成。服务应该返回数据，而不是 HTML。
为什么不直接返回文本并在 html 中包含 html？将其用于服务的目的是什么？
@FelixGluschenkov 加油。如果您希望我们帮助您，您需要发布相关代码。不贴代码我们怎么能猜到textList是怎么初始化的，从哪里来的等等呢？

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

最佳实践

不要以你的方式使用服务来操作 DOM，这是不好的做法。而是使用您的服务来获取您的文本数组，然后在控制器中实例化它。

从控制器你可以绑定你的数组返回到你的$scope 并且在你的 html 中你应该有这样的东西

<div class="checkbox" ng-repeat="item in list">
  <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

如果我理解你想要做什么的话。

【讨论】：

感谢最佳实践提示。我已经尝试了你的建议，但它仍然不起作用。见编辑 2。
你从哪里得到你的数组值？ http?
哦，我让它工作了 :D 事实证明，即使我在获取数组之前调用 Parse 查询，代码在查询之后继续运行。 IE。查询被调用，获取数组被调用（但查询仍在获取数据）。
我添加了一个 $timeout：见编辑 3。它有效，但你能告诉我这样做是否是好的做法吗？

【解决方案2】：

每当您从后端填充列表时，您会看到后端调用需要一些时间。使用 ng-if 是我认为的最佳选择之一，因为在数组具有值之前不会加载元素。使用当前方法，即使在 150 毫秒内，也无法保证您将获得数据。希望它可以帮助某人。

【讨论】：