$范围$腕表不工作

Question

你好，我有以下服务：

angular.module('vendor').service('ticketService', function() { 

    var ticketList = []; 
    var result = false; 

    var addToCart = function(type, ticket, tSI) { 
     var data = {} 

     if (type =='event') 
     { 
      data = { 
       type: type, 
       tSI: tSI 
      } 
     } 

     if (type =='bus') 
     { 
      data = { 
       type: type, 
       company: ticket.company, 
       date: ticket.when, 
       number: ticket.number || 1, 
       tSI: tSI 
      } 
     } 

     if (type == 'extra') 
     { 
      data = { 
       type: type, 
       extra: ticket, 
       tSI: tSI 
      } 
     } 

     $.ajax({ 
      type: "post", 
      url: '/cart', 
      headers: { 
       'X-XSRF-Token': $("meta[name='csrf_token']").attr("content") 
      }, 
      data: data, 
      dataType: 'json', 
      success: function (data) { 
       ticket.hasTicket = true; 
       result = 200; 
      } 
     }); 
    } 

    return { 
     addToCart: addToCart, 
     result: result 
    }; 

}); 

现在我把这种服务在我的控制器：

angular.module('vendor').controller('TicketController', ['$http', '$scope', '$rootScope', 'ticketService', '$timeout', function($http, $scope, $rootScope, ticketService, $timeout) { 
    $scope.addToCart = function(type, ticket, tSI, $index) { 
       $scope.selectedIndex = $index; 

       $scope.isWorking = true; 
       $scope.isReady = false; 

       ticketService.addToCart(type, ticket, tSI); 
       $rootScope.$broadcast('TICKET_ADDED', true); 

      }; 

      $scope.$watch('ticketService.result', function (newVal, oldVal) { 
       alert(ticketService.result); 
       if (typeof newVal !== 'undefined') { 
        if (ticketService.result == 200) { 
         $scope.isWorking = false; 
         $scope.isComplete = true; 
        } 
       } 
      }); 
}]); 

当票证加入我希望能够为了在这种情况下将结果返回给控制器200，我目前正在尝试观察ticketService.result的值，但是当函数完成时$ watch不会执行任何操作。

Answer 1

更好地将ticketService.result分配给$scope属性并收听该属性。使用$scope.result = ticketService.result。

$scope.$watch('result', function (newVal, oldVal) { 
       alert(ticketService.result); 
       if (typeof newVal !== 'undefined') { 
        if (ticketService.result == 200) { 
         $scope.isWorking = false; 
         $scope.isComplete = true; 
        } 
       } 
      }); 

另一种选择是，

而是在你的范围内创造一个$watch，emit事件从服务和listen给它的。

象下面这样：

进样$rootScope在您服务。

$.ajax({ 
      type: "post", 
      url: '/cart', 
      headers: { 
       'X-XSRF-Token': $("meta[name='csrf_token']").attr("content") 
      }, 
      data: data, 
      dataType: 'json', 
      success: function (data) { 
       ticket.hasTicket = true; 
       result = 200; 
       $rootScope.$emit("result-changed"); 
      } 
     }); 

在你的控制器

，

$scope.$on("result-changed", function(event, data) { 
    if (ticketService.result == 200) { 
      $scope.isWorking = false; 
      $scope.isComplete = true; 
    } 
}); 

这将减少$watch数量，您可以在您的应用程序拥有。只有在事件触发时，控制器中的监听器才会触发。

Answer 2

尝试观看它返回tickectService.result值，而不是字符串的函数：

$scope.$watch(function() { return ticketService.result; }, function (newVal, oldVal) { 
      alert(ticketService.result); 
      if (typeof newVal !== 'undefined') { 
       if (ticketService.result == 200) { 
        $scope.isWorking = false; 
        $scope.isComplete = true; 
       } 
      } 
     });