使用 ng-click 切换内容

Question

我有以下循环遍历字符串数组的查询 wikiContent。一旦我显示了数组中的前三个值（句子），我想添加一个 link 表示 More，当您单击它时它会显示其余的句子。

这是我所拥有的（这是在使用 $http 的 AJAX 请求中）：

var opt = "<span>";
for(var j = 0; j < wikiContent.length; j++){
    opt += wikiContent[j];
    if(j === 2){
        opt += "</span><span ng-hide='!show'>";
    }
}
opt += " ... <a href=\"\" ng-click='show=!show'>More</a>";
opt += "</span>";

$rootScope.text = opt;

当我点击 More 时，它会做两件事：

重新加载页面。
它不切换文本

我该怎么做才能解决这两个问题？

这里是 HTML:

<div class="panel-body" ng-bind-html="toHtml(text)"></div>

这里是 toHtml() 函数：

$scope.toHtml = function(string){
    return $sce.trustAsHtml(string);
};

Answer 1

阅读文档后，Angular 提到使用控制器中的 dom 是个坏主意：

Note: This error often means that you are accessing DOM from your controllers, which is usually a sign of poor coding style that violates separation of concerns.

所以，我所做的是创建一个包含目录并将包含的内容放在那里，现在我正在使用 ng-include 而不是在控制器中构建 dom 项。

使用 ng-click 切换内容

Toggle content using ng-click

javascript

angularjs

angularjs-ng-click

ng-hide