Question

我有一个案例，我有一个孩子和父指令。我需要在处理完所有子指令后在父级上运行一个函数。我希望能够在父母postlink函数中做到这一点。但是，由于子指令使用ngRepeat，因此不会发生这种情况。会发生什么是父级前后链接触发，然后是每个子级前后链接功能。我确定这是使用优先级1000的ngRepeat。

如何在所有子指令执行后运行父postlink函数？

我在这里创建了一个问题：

https://plnkr.co/edit/rYK1ZjoWdukXEWFTri19?p=preview

(function(){
  'use strict';
  
  angular.module('plunker', ['ngSanitize']);
  
  angular
    .module('plunker')
    .controller('MainCtrl', function() {});
  
  angular
    .module('plunker')
    .directive('parentItem', function($log) {
      return {
          restrict: 'E',
          controller: controller,
          link: {
            pre: parentPrelink,
            post: parentPostlink
          }
      };
  }).directive('childItem', function($log) {
      return {
          restrict: 'E',
          require: '^parentItem',
          controllerAs: 'vm',
          template: '<h4 ng-transclude="title" id="$id"></h4><div ng-transclude="detail"></div>',       
          transclude: {
            title: 'childTitle',
            detail: '?childDetail'
          },          
          link: {
            pre: childPrelink,
            post: childPostlink
          }
      };
  });
  
  function controller($scope, $compile, $window, $timeout, $log){
    var ctrl = this;
    
      ctrl.log = '';
      
      ctrl.logger = function(msg){
        $log.info(msg);
        ctrl.log += ('<li>' + msg + '</li>'); 
      }
  }
  
  function childPrelink(scope, iElement, iAttrs, controller){
    controller.logger('child pre');
  }
  function childPostlink(scope, iElement, iAttrs, controller){
    controller.logger('child post');
  }
  function parentPrelink(scope, iElement, iAttrs, controller){
    controller.logger('parent pre');
  }
  function parentPostlink(scope, iElement, iAttrs, controller, transcludeFn){
    controller.logger('parent post');
  }
    
})();

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script data-require="sanitize@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-sanitize.js"></script>
    
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <link rel="stylesheet" href="style.css" />
    
    <script src="app.js"></script>
    
  </head>

  <body ng-controller="MainCtrl">
    
    <parent-item>
    
      <child-item ng-repeat="n in [1, 2, 3, 4] track by $index">
        <child-title>Child {{n}} title</child-title>
        <child-detail>Child {{n}} detail</child-detail>
      </child-item>

    </parent-item> 
  
  </body>

</html>

使用ngRepeat

0 个答案: