AngularJS。 无法更改指令中的元素

Question

AngularJS 1.5.0. I'm using custom directive ddTextCollapse to collapse\\expand long posts in thread and recently encountered strange problem - some posts won't expand due to DOM not being changed by script. Here's code:

link: function(scope, element, attrs) {
  scope.doc.collapsed = false;
  var child = element.children();

  scope.doc.toggle = function() {
    scope.doc.collapsed = !scope.doc.collapsed;
    child.toggleClass('collapsed');
    console.dir(child); //everything is fine! Should have changed DOM also, but alas.
  };

  attrs.$observe('ddTextCollapseMaxHeight', function() {
    var maxHeight = scope.$eval(attrs.ddTextCollapseMaxHeight);

    if (child.height() > maxHeight) {
      child.addClass('collapsed');
      scope.doc.collapsed = true;
      var toggleButton = $compile('<i class="material-icons collapse-text-toggle" ng-click="doc.toggle()">more_horiz</i>')(scope);
      child.after(toggleButton);
    }

  });
}

I'm really confused about why that can happen. It seems to depend on the type of post but the problem occurs even when the markup is identical. The markup:

<div ng-if="discus.expanded[doc.unid] !== 'attached'" dd-text-collapse dd-text-collapse-max-height="100" class="col-lg-24 martop5 text-content">
  <div ng-bind-html="doc.body | linkCreate | nl2br | quoteAuthor | trustAsHtml" class=""></div>
</div>

It looks like when you messed up with scopes and change child only when you really need to change the parent. But again, I can't see why or how that can happen.

Answer 1

If you want you can download the angular js custom directive for this task. There are many directives but I have used the below and it works fine.

http://ngmodules.org/modules/angular-readmore

Answer 2

我最终只使用了jQuery选择器（而不是element或child ），并且为此使用它显然是一些Angular错误。