创建指令以检查新消息并添加徽章

Question

我在 ionic 应用程序中使用此控制器来检查新消息或 activity 并在有消息时添加徽章：

.controller('checkNew', function($scope, getNewMsg, getNewAct, $localstorage, $cordovaLocalNotification, $http, $state) {
         getNewMsg.getNew(function(data) {if(data!=0){$scope.addActivity(data);$scope.counterAct = data}else{$scope.cancelAllNotification}});
         getNewAct.getNew(function(data) {if(data!=0){$scope.addNotification(data);$scope.counter = data}else{$scope.cancelAllNotification}});

例如我的 .factory getNewMsg:

.factory('getNewMsg', function($http, $localstorage, $timeout){
    return {
        getNew: function(callback){
            var user_id = $localstorage.get('user_id');
            var timer;
            function myLoop(){
                timer = $timeout(function(){console.log( "Timeout executed")},5000);
                timer.then(
                    function(){$http.post('http://www.digitalxp.it/appwork/include/check_msg.asp?id='+user_id).success(function(data){callback(data)}).error(function(){alert("Errore di comunicazione!")});myLoop()},
                    function() {console.log("Timer rejected!")}
                    );
            }
            myLoop();
        }}
})

我的问题是我每次都必须调用控制器在 header 中添加徽章，但我只会检查一次并查看所有 ion-view 中的徽章应用程序！（还有消息项附近的侧边菜单！）

我认为可以使用指令，但我不知道如何开始！

Answer 1

我已按照您的要求将其更新为使用 broadcas，现在您的控制器将注册到事件 newMessageReceived 并且每 5 秒更新一次。此外，这更像是一种服务，所以我将模块更新为服务而不是工厂。

请注意，我将 timer.then(setNew, handleError); 更改为 timer.then(setNew(), handleError);

.controller('checkNew', function($scope, messageService, getNewAct, $localstorage, $cordovaLocalNotification, $http, $state) {
  //register to broadcast and update when the messages are updated
  messageService.newMessageReceived($scope, updateMessage)

  function updateMessage(message) {
    if(message){ 
      $scope.addActivity(message);
      $scope.counterAct = message;
    } else {
      $scope.cancelAllNotification
    }
  }
});

.service('messageService', function($rootScope, $http, $localstorage, $timeout){
  /* Initialization */
  //setup timer to run every 5 seconds
  var timer = $timeout(timeoutFunction, 5000);
  //set the actions for resolve and reject
  timer.then(setNew(), handleError);

  function timeoutFunction() {
    return;
  }

  function handleError() {
    console.log('Timer rejected');
  }
  //every time the newMessageRecieved event is broadcasted, run the callback and register the scope
  function newMessageReceived(scope, callback) {
    callback(getNew());
    scope.$on('newMessageReceived', function() {
      callback(getNew());
    });
  }

  function getNew() {
    return $localstorage && $localstorage.message || undefined;
  }

  function setNew() {
    var user_id = $localstorage.get('user_id');
    return $http.post('http://www.digitalxp.it/appwork/include/check_msg.asp?id='+user_id)
      .success(function(data){
        $localStorage.message = data;
        $rootScope.$broadcast('newMessageReceived');
      })
      .error(function(){alert("Errore di comunicazione!")})
  }

  return {
    newMessageReceived: newMessageReceived
  };
});

创建指令以检查新消息并添加徽章

Create directive to check new message and add badge

javascript

badge

angularjs

ionic