使用控制器更改 ng-bind-html 值

Question

我想更改 ng-bind-html 值，但不知道该怎么做。

我的初始 ng-bind-html 值是：-

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)|truncate:90"></p>

并想要这个值：

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)"></p>

按下按钮后。

最初它将我的数据截断为 90 个字符，我想在按下按钮后显示完整数据。我的主要动作是在按下按钮（阅读更多）后显示完整数据。

Answer 1

简单的技巧：

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)|truncate:limit"></p>

<button ng-click="showAll()">Show all</button>

在控制器中：

$scope.limit = 90;
$scope.showAll = function() {
    $scope.limit = 100000000; // should be large enough not to truncate anything
};

虽然这仍会尝试截断。如果你真的想避免它，一个更干净的解决方案是在控制器中使用过滤器：

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderAndTruncateHtml(post.content)"></p>

<button ng-click="showAll()">Show all</button>

在控制器中：

$scope.shouldTruncate = true;
$scope.renderAndTruncateHtml = function(value) {
    var result = $scope.renderHtml(value);
    if ($scope.shouldTruncate) {
        result = $filter('truncate')(result, 90);
    }
    return result;
};
$scope.showAll = function() {
    $scope.shouldTruncate = false;
};

Answer 2

尝试这样的事情。

控制器：

var truncateText = true;

$scope.renderHtml = function(content){
  // your code here
  return truncateText ? $filter('truncate')(content, 90) : content;
};

$scope.toggleTruncate = function(){
  truncateText = !truncateText;
};

查看：

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)"></p>

<button class="button button-block" ng-click="toggleTruncate()">Toggle Truncate</button>

使用控制器更改 ng-bind-html 值

Change ng-bind-html value using controller

angularjs

ng-bind-html

ionic-framework