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

Question

我想要更改ng-bind，但是不知道怎么做。

我最初的ng-bind-html vale是:-

<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>