在Angular js中转换后链接函数

Question

我在Angular中有两个指令.一个人必须被另一个人包围.我的问题是在transclude函数运行后我无法使用简单的JQuery选择器访问DOM .特别是我想编译第一个指令(主题),然后将其注入另一个指令(about-us),这样我就可以访问 about-us链接函数中的DOM元素.这是我想要实现的代码:

<section>
    <topic active = "true" title = "Lorem ipsum" icon = "ti-layers">A) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-package">B) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-stats-up">C) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-layout-media-center-alt">D) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
</section>

about-us和topic指令都transclude: true在其配置中使用来编译各自的模板.

angular.module('playground', []).directive('topic', function()
{
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'path/to/topic.html',
    transclude: true,
    scope: true,
    link: function(scope, element, attributes, ctrl, transclude)
    {
        // Playing around with scope

        // Transcluding
        element.find('.tab-content p').append(transclude());
    }
  };
}).directive('section', ['$timeout', function($timeout)
{
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'path/to/about-us.html',
    transclude: true,
    link: function(scope, element, attributes, ctrl, transclude)
    {
      element.find('.tabs').append(transclude());

      // Now I want to retrieve some DOM contents after the transclude has taken place

      $timeout(function()
      {
        // Playing with DOM and JQuery but sometimes this function run prior of the child transclude function

      });
    }
  };
}]);

为了完整起见,这里是两个模板的代码:

<!-- topic.html -->
<li class="ng-class:active">
  <div class="tab-title">
      <i class="icon ng-class:icon;"></i>
      <span>{{title}}</span>
  </div>
  <div class="tab-content">
    <!-- ng-transclude directive not needed -->
    <p ng-transclude></p>
  </div>
</li>

<!-- about-us.html -->
<section class="bg-secondary pb0" id="about-us">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h2 class="mb64 mb-xs-24">About us.</h2>
      </div>
      <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
        <div class="tabbed-content icon-tabs">
          <ul class="tabs"></ul>
        </div>
      </div>
    </div>
  </div>
</section>

问题是,$timeout调用函数作为工作周围有一个完全随机的行为,有时它的工作原理,其他时候没有.我怎样才能解决这个问题？我错过了关于transclude,link和compile函数的一些内容吗？谢谢你的每一个回复!

Answer 1

我已经解决了在主指令上设置一个简单的观察器transcludeFn并在链接函数中使用 Angular 注入的问题。

这是代码。如果您遇到类似问题，希望它能有所帮助。

angular.module('playground', []).directive('topic', function()
{
  return {
    restrict: 'AE',
    replace: true,
    templateUrl: 'path/to/topic.html',
    transclude: true,
    scope: true,
    link: function(scope, element, attributes, ctrl, transclude)
    {

      // Playing with scope...

      transclude(scope.$parent, function(clone, parent_scope)
      {
        // Transcluding
        element.find('.tab-content p').append(clone);

        // It's time to render!
        parent_scope.should_render = true;
      });
    }
  };
}).directive('Section', function()
{
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'path/to/section.html',
    transclude: true,
    scope: {},
    link: function(scope, element, attributes, ctrl, transclude)
    {
      scope.rendered = false;
      scope.should_render = false;

      transclude(scope, function(clone)
      {
        // Transcluding
        element.find('.tabs').append(clone);
      });

      // Setting up a watcher
      var remove_watcher = scope.$watch('should_render', function(should_render)
      {
        if(should_render)
        {
          if(scope.rendered)
          {
            remove_watcher();
            return;
          }

         // Now I can play with the DOM and JQuery.

          scope.rendered = true;
        }
      });
    }
  };
})

现在我可以像这样使用我的指令：

<section>
    <topic active = "true" title = "Lorem ipsum" icon = "ti-layers">A) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-package">B) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-stats-up">C) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
    <topic title = "Lorem ipsum" icon = "ti-layout-media-center-alt">D) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
</section>