angularjs - 我正在使用 ng-bind-html 但它导致我的 css 文本溢出 : ellipsis . 如何应用此属性？

Question

单击后，我正在使用包含此文本溢出 css 的类交易:省略号。但由于 ng-bind-hml，它不起作用。我无法删除 ng-bind-html，因为我的数据带有一些 html 标签。

<p ng-click="notes.notesClass = 'deal-expand';expand=true"  class="deal-collapse" ng-class="notes.notesClass" ng-bind-html="notes.content">
</p>

Answer 1

在 Angular 中操作类的正确方法是使用具有 boolean 值的字典，如下所示:ng-class={'deal-expand':true, 'deal-collapse':错误的。下面的代码可能会做你想做的事:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
   $scope.notes=[];
   $scope.notes.content=$sce.trustAsHtml('This is some long text that will not fit in the box');
});

.deal-collapse{
  white-space: nowrap;
  text-overflow:ellipsis; 
  width:100px;
  overflow:hidden;
}
.deal-expand{
  text-overflow:inherit;
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <p ng-click="notes.notesClass = {'deal-expand':true, 'deal-collapse':false}"  class="deal-collapse" ng-class="notes.notesClass" ng-bind-html="notes.content">
  </p>
</div>

你也可以看看 Animations: the Angular Way了解更多详情。