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

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>

现在我需要在分隔符 div 中的文本中每隔 5 个字符添加软连字符 (­)。我该怎么做？

问题是我需要在翻译所有范围变量以添加软连字符后访问分隔符 div 文本。

edit#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。然后让对象随心所欲地操作。在控制器中添加您需要的所有垫片。然后只需在指令模板中的 {{ ... }} 中显示结果。 代码：

.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

没有 transclude 的指令可能看起来像：

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