Question

我在使用angularjs指令范围时遇到了麻烦。

方案：范围数据，在指令的link函数内定义。定义了一个外部templateUrl。指令使用服务从api获取数据。服务是在指令中注入的。

问题最初，当应用程序在用户登录后首先加载时，指令范围数据不会绑定到模板，但如果我刷新浏览器，它将按预期正常工作。

我的代码

  link: function (scope, el, attrs) {
    // notificationWidgetService which fetch offline notification list 
    notificationWidgetService.getNotification();


    scope.$on('notificationWidgetService-received-data-event', function (evt, data) {

        var notification = data;
        if ($rootScope.notifications.notificationList.length > 0) {
          var duplicate = true;
          for (var i = 0; i < $rootScope.notifications.notificationList.length; i++) {
            if ($rootScope.notifications.notificationList[i].notificationId == notification.notificationId) {
              duplicate = true;
              break;
            } else {
              duplicate = false;
            }
          }
        } else {
          var duplicate = false;
        }

        if (!duplicate) {
          $rootScope.$apply(function() {
            $rootScope.notifications.notificationList.splice(0, 0, notification);
            $rootScope.notificationList = $rootScope.notifications.notificationList;
            $rootScope.notificationsCount = $rootScope.notificationList.length;
           console.log($rootScope.notificationList) // able to get data here
           console.log($rootScope.notificationsCount); // able to get data here
          });
        }
    });
  }
};}]);

notificationWidgetService是一种从api获取通知并进行广播的服务。 notificationWidgetService是signalR组件，它将在服务器推送时保持广播消息。

我的模板是

<div ng-repeat="(key,notification) in notificationList track by $index"
     class="notify" id="notification-{{notification.notificationId}}">
  <div class="checkbox" ng-if='notification.notificationType=="Action"'>
    <span ng-init="showSelectAll=true"></span>
    <input type="checkbox" ng-model="notification.notificationActive"
           ng-change="storeSelectedNotification(notification, notification.notificationActive, $event)"
           id="checkBox_{{notification.notificationId}}" class="checkbox rowSelect">
    <label for="checkBox_{{notification.notificationId}}"></label>
  </div>
  <div class="profile-pic">
    <img ng-src="./images/personIcon.png" alt=""/>
  </div>
  <div class="notify-info">
    <span class="profile-name">{{notification.fromEmployeeName}} </span>

    <p>
      {{notification.message}}
      <!--<limitlimit-content content="notification.message"></limitlimit-content>-->

          <span ng-show="notification.startDate !=null && notification.endDate != null">
            from {{notification.startDate | date : dateFormat}} to {{notification.endDate | date : dateFormat}}
          </span>
    </p>

    <div class="action" ng-if='notification.notificationType=="Action"'>
      <button class="btn">
        <i class="icon approve"></i>Approve
      </button>
      <button class="btn">
        <i class="icon reject"></i>Reject
      </button>
      <button class="btn">
        <i class="icon forward"></i>Farward
      </button>
      <a class="btn only-icon" ng-href="im:sip:{{notification.fromEmployeeEmailAddress}}">
        <i class="icon-skype icon-skype-call"></i>
      </a>
      <!-- <a class="btn only-icon" ng-href="sip:{{notification.fromEmployeeEmailAddress}}"><i class="icon-skype"></i></a> -->
    </div>
    <div class="action" ng-if='notification.notificationType!="Action"'>
      <a class="btn only-icon" ng-href="im:sip:{{notification.fromEmployeeEmailAddress}}"> <i
        class="icon-skype icon-skype-call"></i></a>
      <button class="btn" ng-click="updateNotificationStatus(notification,1 )">
        <i class="icon mark_as_read"></i>MARK AS READ
      </button>
    </div>
  </div>
</div>

只有在刷新页面后，所有功能才能正常工作。但最初当用户登录并登陆主页范围数据时没有绑定，但是我能够在控制台日志中看到数据

是否有任何身体都面临同样的问题。任何人都可以帮助我

谢谢和问候

当应用程序首先加载时，angularjs指令范围数据最初不绑定到模板

0 个答案: