AngularJS - 在 $on 之前 $emit fire

Question

我正在使用 AngularJS 框架。我写了一些带有和不带有自己控制器的指令，它们有时会相互包含。

对于每门课程，我都使用自己的指令来打印其信息

<li ng-repeat="course in courses" on-courses-loaded="fetch_subscribed">
            <course-info course="course"></course-info>
</li>

'on-courses-loaded' 属性正在寻找最后一个元素，我写它是为了在 ng-repeat 结束时做一些事情：准备一些数据，并为每个注册为 $rootScope.$ 的函数发出信号on('courses_available', function() {}) (范围

angular.module('app').directive('onCoursesLoaded', [
    '$rootScope', function ($rootScope) {
            return {
                restrict: 'A',
                link: function (scope, element, attr) {
                     if (scope.$last === true) 
                     {
                         element.ready(function() {
                               // Prepare things, when done return promise and then  -> 
                               $rootScope.$broadcast('courses_available');
                         });
                     }
                }
            }
        }]);

在课程信息指令中，调用了另一个指令

<subscribe code="course.code" triggered="true"></subscribe>

使用此代码

<div ng-show="available">
    <button type="button" class="btn btn-success" ng-hide="subscribed" ng-click="subscribe()">
        <span class="glyphicon glyphicon-ok"></span> Subscribe
    </button>

    <button type="button" class="btn btn-danger" ng-show="subscribed" ng-click="unsubscribe()">
        <span class="glyphicon glyphicon-remove"></span> Unsubscribe
    </button>
</div>

还有这个链接功能

if (scope.triggered === true)
{
    console.log('wait for emit');
    $rootScope.$on('courses_available', function() {
        internals.getSubscribed();
    });
}
else
{
    console.log('do not wait for emit');
    scope.$watch('code', function(value) {
        internals.getSubscribed();
    });
}

最大的问题是在subscribe 指令设置其$rootScope.$on('courses_available', ..) 之前发出信号

在这里你可以找到扩展的 HTML 伪代码

<li class="list-group-item" ng-repeat="course in courses | filter: search" on-courses-loaded="fetch_subscribed">
    <!--<course-info course="course"></course-info> IS NEXT DIV-->
    <div> 
        <!--<subscribe code="course.code" triggered="true"></subscribe> IS NEXT DIV-->
        <div ng-show="available">
            <button type="button" class="btn btn-success" ng-hide="subscribed" ng-click="subscribe()">
                <span class="glyphicon glyphicon-ok"></span> Subscribe
            </button>

    <button type="button" class="btn btn-danger" ng-show="subscribed" ng-click="unsubscribe()">
                <span class="glyphicon glyphicon-remove"></span> Unsubscribe
            </button>
        </div>
    </div>

1. 我需要在 ng-repeat 之后准备数据并发出信号
2. 虽然 1.，来自 ng-repeat 的每个内容都必须订阅 $rootScope.$on() 并且在发出之前。

如果您有任何提示，谢谢大家。

Answer 1

您可以如下检测 ng-repeat 的完成事件

if (scope.$last){
      window.alert("im the last!");
}

我做过类似的事情，所以我会在这里发布我的代码，也许它可以帮助你。首先我创建了自定义指令

'use strict';

    angular.module('myApp')
      .directive('onFinishRender',['$timeout', function ($timeout) {
        return {
          restrict: 'A',
          link: function (scope, element, attr) {
            if (scope.$last === true) {
              $timeout(function () {
                scope.$emit('tilesCreated');
              });
            }
          }
        }
      }]);

然后将此指令与 ng-repeat 一起使用

   <div  on-finish-render=""   ng-repeat="tile in tiles" ></div>

然后我在另一个指令中监听这个事件

      scope.$on('tilesCreated', function() {
         // Do something here
      });

附：请注意，在这里我在同一范围内做所有事情。但这取决于您是否希望可以在 $rootScope 上广播事件。我只是想让你知道如何做到这一点。我希望它会有所帮助。