在Angular js中转换后链接函数

Question

我在Angular中有两个指令。一个人必须被另一个人包围。我的问题是，在jquery.ajax()函数运行后，我无法使用简单的JQuery选择器访问DOM。特别是我想编译第一个指令（主题），然后注入它在另一个（关于我们），所以我可以访问DOM元素< / strong>在about-us链接功能中。 以下是我想要实现的代码：

transclude

about-us和topic指令在其配置中使用<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> 来编译各自的模板。

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> 函数具有完全随机行为，有时它可以正常工作，有时则不会。吨。我怎样才能解决这个问题？ 我错过了关于转换，链接和编译函数的内容吗？ 谢谢你的每一个回复！

Answer 1

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

这是代码。希望如果你遇到类似的问题会有所帮助。

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>