Angularjs 在转换范围变量后修改DOM内容

我想截断表格单元格，但尽可能多地将内容放入其中。我想在指令中实现一个非常好的（）。我需要将表格单元格从

<td>veryverylongunbreakablecontent</td>

用模板

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

在控制台中为我提供：

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

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

编译、预链接、后链接 控制台中的输出：

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

模板

.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会是什么样子？

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

指令（'truncateString'，函数（$compile）{ 返回{ 限制：'E'， templateUrl:“{{strWithBreaks}}”， 范围：{ str:'=ngModel' }, 控制器：['$scope'，函数（$scope）{ $scope.strWithBreaks=（函数（输入）{ var newInput=''； 对于（变量i=0，len=input.length；i 用法：

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

---

没有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);
    }
  };
});

指令（'MWTDRUNCATE'，函数（）{ 返回{ 限制：“A”， templateUrl:'modules/ui/templates/mwComponents/mwTableTruncate.html'， 范围：{ longText:“@mwLongText” }, 替换：正确， 链接：功能（范围）{ var softHyphenate=函数（输入）{ var newInput=''； 对于（变量i=0，len=input.length；i 以及模板：

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

{{longText}}
{{softText}}

用法如下：

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

veryverylongunbreakablecontent

在解释变量后，使用link函数而不是compile应该会使您进入链接后阶段。您是否尝试过使用link而不是compile？yepp，更新了问题，将postlink代码移动到$timeout函数中，这应该确保摘要循环也可以使用隔离作用域，传入longText变量，然后您就可以访问，而无需等待超时。然后，还可以删除transclude属性。rbaghbanli从一开始就是正确的。您如何使用一个独立的作用域来实现它？您能扩展您的代码示例吗？我已经用一个例子更新了这个问题，说明如何使用transclude。

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

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

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