在Angular js中转换后的链接函数

马可·莫斯基蒂尼

在Angular中有两个指令一个必须被困在另一个中。我的问题是,transclude函数运行后,我无法使用简单的JQuery选择器访问DOM 特别是,我想编译第一个指令(主题),然后注入另一个指令关于我们),以便可以访问关于我们链接功能中的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作为变通方法调用函数具有完全随机的行为,有时有时起作用,而有时则不起作用。我怎样才能解决这个问题?我是否缺少有关转写,链接和编译功能的信息?谢谢您的答复!

马可·莫斯基蒂尼

我已经解决了在main指令上设置简单观察程序并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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章