AngularJS——用用户生成的内容增强动态HTML内容

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中添加绑定变量一样。下面是实现previous/next按钮的angular代码，这些按钮会动态加载html模板，并用用户添加的注释填充它们。在底部是一个链接到一个功能齐全的jsfile。

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/