0

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

我正在开发一种网络电子阅读器，它可以动态地提取 HTML 内容的页面。到目前为止，我正在使用 $http AJAX 调用并将其与“ng-bind-html-unsafe”绑定（HTML 是我们自己的，只是从同一服务器上的目录提供。我可以控制HTML，所以如果需要，我可以以不同的方式执行此操作）。因此，每次用户按下上一个/下一个时，控制器都会简单地获取 HTML 的上一个/下一个页面并在模型中进行切换——效果很好。

但接下来我需要通过用户添加来增强这个动态 HTML，例如评论和突出显示。它们需要出现在用户添加它们的位置，例如评论很可能位于特定段落的下方。

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

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

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

4

1 回答 1

0

Use an "ng-include" and dynamically bind a src attribute from the controller. Adding dynamic, user generated content is as adding the binding variables to your html. Following is angular code that implements previous/next buttons that dynamically loads html templates and populates them with the user added comments. At the bottom is a link to a fully functional 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/

于 2013-03-05T16:52:45.073 回答