Question

我有这段代码

<div ng-app="m" ng-controller="a">
        <div d style="width:100px;height:200px" >
            {{customer.name}} 
           <p>Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy textLorem Ipsum is simply dummy textLorem Ipsum is simply dummy textLorem Ipsum is simply dummy textLorem Ipsum is simply dummy text</p>
        </div>
    </div>

这是JS代码

var b = angular.module('m', []).controller('a', function ($scope) {
    $scope.customer = {
        name: 'Aby'
    } }); b.directive('d', function () {
    return {
        retistric: 'A',
        link: function ($scope, element, attributes) {
            $(element).dotdotdot({
                /*  The text to add as ellipsis. */
                'ellipsis': '... ',

                /*  jQuery-selector for the element to keep and put after the ellipsis. */
                'after': null,

                /*  Whether to update the ellipsis: true/'window' */
                'watch': true,

                /*  Optionally set a max-height, if null, the height will be measured. */
                'height': null,

                /*  Callback function that is fired after the ellipsis is added,
                    receives two parameters: isTruncated(boolean), orgContent(string). */
                'callback': attributes["callback"],
            });

        }
    };
     });

这是输出

{{customer.name}} Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy textLorem Ipsum is...

这里dotdotdot调用将angularjs表达式视为字符串。如何确保在插件执行之前评估表达式？

Answer 1

尝试在指令中更改链接以进行编译。

var b = angular.module('m', []).controller('a', function ($scope) {
  $scope.customer = {
    name: 'Aby'
  } }); b.directive('d', function () {
  return {
    retistric: 'A',
    compile: function (element, attributes) {
      return {
        post: function ($scope, element) {
          $(element).dotdotdot({
            /*  The text to add as ellipsis. */
            'ellipsis': '... ',

            /*  jQuery-selector for the element to keep and put after the ellipsis. */
            'after': null,

            /*  Whether to update the ellipsis: true/'window' */
            'watch': true,

            /*  Optionally set a max-height, if null, the height will be measured. */
            'height': null,

            /*  Callback function that is fired after the ellipsis is added,
             receives two parameters: isTruncated(boolean), orgContent(string). */
            'callback': attributes["callback"]
          });
        }
      }
    }
  }
});

dotdotdot插件在评估之前解析角度表达式

1 个答案: