编辑＃1 @sirrocco

Question

我想截断我的表格单元格，但尽可能多地填充它们。我想在指令中实现一个很好的solution（fiddle）。我需要从

转换表格单元格

<td>veryverylongunbreakablecontent</td>

到

<td>
  <div class="container">
    <div class="content">veryverylongunbreakablecontent</div>
    <div class="spacer">veryv&shy;erylon&shy;gunbr&shy;eakab&shy;lecon&shy;tent</div>
    <span>&nbsp;</span>
  </div>
</td>

这是一个简化的例子。我的表格单元格由角度范围变量组成：

<td>{{ item.attribute.verylong }}</td>

到目前为止，我所提出的是指令

.directive('mwTableTruncate', function ($compile) {
  return {
    restrict: 'A',
    templateUrl: 'modules/ui/templates/mwComponents/mwTableTruncate.html',
    transclude: true,
    compile: function( tElem, tAttrs ){
    }
  };
});

带有模板

<div class="containerTest">
  <div class="content">
    <div ng-transclude></div>
  </div>
  <div class="spacer">
    <div ng-transclude></div>
  </div>
  <span>&nbsp;</span>
</div>

现在我需要每隔5个字符向spacer div中的文本添加软连字符（）。我怎么能这样做？

问题是我需要在翻译完所有范围变量后添加软连字符才能访问spacer div文本。

编辑＃1 @sirrocco

我已经检查了编译，预链接，链接，链接后阶段的输出。这些阶段都不会转换范围变量。

链接阶段

.directive('mwTableTruncate', function ($compile) {
  return {
    restrict: 'A',
    link: function (scope, iElem, attrs) {
      console.log('link => ' + iElem.html());
      console.log('link text => ' + iElem.text());
    }

  };
});

让我进入控制台：

link => 
      {{ item.attributes.surname }}

link text => 
      {{ item.attributes.surname }}

编译，预链接，后链接

.directive('mwTableTruncate', function ($compile) {
  return {
    restrict: 'A',
    templateUrl: 'modules/ui/templates/mwComponents/mwTableTruncate.html',
    transclude: true,
    compile: function( tElem, tAttrs ){
      console.log('Compile => ' + tElem.html());
      return {
        pre: function(scope, iElem, iAttrs){
          console.log('pre link => ' + iElem.html());
          console.log('pre link text => ' + iElem.text());
        },
        post: function(scope, iElem, iAttrs){
          console.log('post link => ' + iElem.html());
          console.log('post link text => ' + iElem.text());
          //debugger;
        }
      };
    }
  };
});

在控制台中输出：

pre link =>     <div class="containerTest">
      <div class="content">
        <div ng-transclude=""></div>
      </div>
      <div class="spacer">
        <div ng-transclude=""></div>
      </div>
      <span>&nbsp;</span>
    </div>
pre link text =>     






       

post link =>     <div class="containerTest">
      <div class="content">
        <div ng-transclude=""><span class="ng-binding ng-scope">
          {{ item.attributes.surname }}
        </span></div>
      </div>
      <div class="spacer">
        <div ng-transclude=""><span class="ng-binding ng-scope">
          {{ item.attributes.surname }}
        </span></div>
      </div>
      <span>&nbsp;</span>
    </div>
post link text =>     


          {{ item.attributes.surname }}




          {{ item.attributes.surname }}

如您所见，{{ item.attributes.surname }}变量均未翻译。

编辑＃2

根据后期链接阶段的超时功能提示，我提出了这个解决方案：

指令

.directive('mwTableTruncate', function($timeout) {
  return {
    restrict: 'A',
    templateUrl: 'modules/ui/templates/mwComponents/mwTableTruncate.html',
    transclude: true,
    compile: function() {

      var softHyphenate = function (input) {
        var newInput = '';
        for (var i = 0, len = input.length; i < len; i++) {
          newInput += input[i];
          if (i % 5 === 0) {
            newInput += '&shy;';
          }
        }
        return newInput;
      };

      return {
        post: function (scope, iElem) {
          $timeout(function () {

            var text = iElem.find('div.spacer').text().trim();

            // add tooltips
            iElem.find('div.content').prop('title', text);

            // add soft hyphens
            var textHyphenated = softHyphenate(text);
            iElem.find('div.spacer').html(textHyphenated);

          });
        }
      };
    }
  };
});

模板

<div class="containerTest">
  <div ng-transclude class="content"></div>
  <div ng-transclude class="spacer"></div>
  <span>&nbsp;</span>
</div>

使用隔离范围sirrocco rbaghbanli会是什么样子？

Answer 1

不要转录。只需将item.attribute.verylong设置为指令的ng-model即可。然后让对象按照您的意愿进行操作。在控制器中添加所需的所有垫片。然后只需在模板for {{...}}中显示结果。代码：

.directive('truncateString', function ($compile) {
  return {
    restrict: 'E',
    templateUrl: '{{ strWithBreaks }}',
    scope: {
      str: '=ngModel'
    },
    controller: ['$scope', function ($scope) {
     $scope.strWithBreaks = (function (input) {
         var newInput = '';
         for (var i = 0, len = input.length; i < len; i++) {
           newInput += input[i];
           if (i % 5 === 0) {
             newInput += '&shy;';
           }
         }
         return newInput;
       })(str);
    }]
  };
});

用法：

<truncate-string ng-model="myVeryLongString"></truncate-string>

Answer 2

没有转换的指令可能类似于：

.directive('mwTdTruncate', function() {
  return {
    restrict: 'A',
    templateUrl: 'modules/ui/templates/mwComponents/mwTableTruncate.html',
    scope:{
        longText: '@mwLongText'
    },
    replace:true,
    link: function(scope) {

      var softHyphenate = function (input) {
        var newInput = '';
        for (var i = 0, len = input.length; i < len; i++) {
          newInput += input[i];
          if (i % 5 === 0) {
            newInput += '&shy;';
          }
        }
        return newInput;
      };

      scope.softText = softHyphenate(scope.longText);
    }
  };
});

和模板：

<td>
  <div class="container">
    <div class="content">{{longText}}</div>
    <div class="spacer">{{softText}}</div>
    <span>&nbsp;</span>
  </div>
</td>

用过：

<td mw-td-truncate mw-long-text='{{yourTextVariable}}'>veryverylongunbreakablecontent</td>

翻译范围变量后修改DOM内容

编辑＃1 @sirrocco

链接阶段

编译，预链接，后链接

编辑＃2

2 个答案: