Question

我是AngularJS的新手，希望有人能帮我解决这个问题！

我正在开发一个可以动态提取HTML内容页面的网络电子阅读器。到目前为止，我正在使用$ http AJAX调用并使用'ng-bind-html-unsafe'绑定它（HTML是我们自己的，只是从同一服务器上的目录提供。我可以控制HTML所以如果需要，我可以这样做。）因此，每次用户按下上一个/下一个时，控制器只需读取HTML的上一页/下一页并在模型中切换 - 这非常有效。

但接下来我需要通过添加用户来增强此动态HTML，例如评论和亮点。它们需要出现在用户添加它们的位置，例如评论最有可能位于特定段落的下方。

使用JQuery我想我会给每个HTML元素提供自己的ID，并将每个用户生成内容与特定ID相关联。然后我可以自己操作DOM，例如在相关元素下添加每个注释。

AngularJS的正确方法是什么，因为原则似乎是完全避免直接操作DOM？

我可以看到如何通过将HTML内容定义为模型中的单独元素，为每个段落，标题，图像等提供单独的JavaScript对象来完成它。但这基本上是在JavaScript中定义类似DOM的数据 - 这感觉非常错误和混乱...

Answer 1

使用“ng-include”并从控制器动态绑定src属性。添加动态的，用户生成的内容就像将绑定变量添加到html一样。以下是角度代码，它实现上一个/下一个按钮，动态加载html模板并使用用户添加的注释填充它们。在底部是一个功能齐全的jsfiddle的链接。

angular.module('app',[]).controller('controller', function($scope){
    var change;

    change = function(){
        $scope.src = $scope.page + '.html';        
    };

    $scope.page = 1;
    $scope.items = [];

    change();

    $scope.submit = function(text){
        $scope.items.push(text);
    };
    $scope.next = function () {
        if($scope.page < 3){
            $scope.page++;
            change();
        }
    };

    $scope.previous = function () {
        if($scope.page > 1){
            $scope.page--;
            change();
        }
    };

});

http://jsfiddle.net/jwanga/rnL7c/

AngularJS - 使用用户生成的内容扩充动态HTML内容

1 个答案: