Question

我的目标是在它们之间展示产品和广告的网格。

warehouse.query({limit: limit, skip: skip}).$promise
    .then(function(data) {
        for (var i = 0; i < data.length; i++) {
            var auxDate = new Date(data[i].date);
            data[i].date = auxDate.toISOString();
        }

        Array.prototype.push.apply($scope.products, data);

        //add an img ad        
        var warehouseElem = angular.element(document.getElementsByClassName('warehouse')[0]);
        var newAd = $sce.trustAsHtml('<img src="/ad/?r=' + Math.floor(Math.random()*1000) + '"/>');
        warehouseElem.append(newAd);

        skip += 9
    });

不起作用。我已经尝试过简单地使用纯粹的javascript，

var warehouseElem = document.getElementsByClassName('warehouse')[0];
var newAd = document.createElement('img');
warehouseElem.appendChild(newAd);

也行不通。我想我需要用棱角分明的东西，找不到什么。我认为这是消毒，但也许我只是不知道如何使用它。请记住，我需要在产品之间偶尔注入一次img。

Answer 1

这是ng-repeat的工作！

<div ng-repeat="data in datas">
    <div>[show data here]</div>
    <img src="/ad/?r=' + Math.floor(Math.random()*1000) + '"/>
</div>

如果您绑定了＆＃34;数据＆＃34;在范围和数学中像这样在你的控制器中这样它应该工作

$scope.datas // this is your list of products
$scope.Math = Math;

如果你不想为每一行添加垃圾邮件，你可以使用ng-if和$ index这样：

<div ng-if="$index%2==0">
    <img src="/ad/?r=' + Math.floor(Math.random()*1000) + '"/>
</div>

这将使它显示每2行添加一次。

由于您似乎来自类似jQuery（或原生DOM操作）的背景，我建议您阅读该帖子："Thinking in AngularJS" if I have a jQuery background?。

这将解释为什么你几乎不会操纵DOM和其他一些东西（仅在指令中）。

编辑：修复网格问题，只需合并我的两个html块构建你的数据数组，如下所示： $ scope.myArray = [product [0]，ad [0]或只是一个空字符串，它仍然有效，产品[1]，ad [1]] 和HTML

<div ng-repeat="data in datas">
    <div ng-if="$index%2==0">[show data here]</div>
    <img ng-if="$index%2==1 src="/ad/?r=' + Math.floor(Math.random()*1000) + '"/>
</div>

Answer 2

在AngularJS中，您通常应该避免直接进行DOM操作，而是依赖于ng-show / ng-hide和ng-if等角度指令，根据具体情况动态隐藏模板的各个部分

现在回到手头的问题。

假设您正在尝试使用上面显示的代码呈现加载的产品列表并为其中一些显示广告，您可以尝试以下操作。

<!-- place the img element in your template instead of appending -->
<div ng-repeat="product in products">
    <!-- complex product template-->
    <!-- use ng-if to control which products should have an ad -->
    <img ng-src="product.adUrl" ng-if="product.adUrl" />
</div>

然后在您的控制器中为应该展示广告的产品设置adUrl。

warehouse.query({limit: limit, skip: skip}).$promise
.then(function(data) {
    for (var i = 0; i < data.length; i++) {
        var hasAd = // set to true if this product should have an add or not
        var auxDate = new Date(data[i].date);
        data[i].date = auxDate.toISOString();
        if(hasAd){
            data.adUrl = "/ad/?r=" + Math.floor(Math.random()*1000);
        }
    }

    Array.prototype.push.apply($scope.products, data);

    skip += 9
});

我很可能假设太多了。如果是这种情况，请提供具体案例的更多详细信息。

Answer 3

如果声明范围变量，

$scope.newAd = $sce.trustAsHtml('<img src="/ad/?r=' + Math.floor(Math.random()*1000) + '"/>');

并在您的HTML模板中，有一个像

这样的绑定

<div ng-bind-html="newAd"></div>,

它应该有用。

使用angular附加元素的最佳方法是什么？

3 个答案: