Question

我尝试了$apply()和$digest()的不同变体无济于事。

一旦信使不再使用信使的名称，绑定应该更新，但是没有任何事情发生。我已经能够在分配信使时记录信使的名称，但是dom元素没有更新。我正在使用jade并编译为html，而在应用程序的其他地方没有任何问题。我还在呈现下面显示的视图之前立即调用refreshDelivery函数，这正常工作。

app.js：

    var storeController = require('./controllers/controller');



var storeApp = angular.module('AngularStore', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/store', { 
      templateUrl: 'views/store.html',
      controller: storeController }).
    when('/products/:productSku', {
      templateUrl: 'views/product.html',
      controller: storeController }).
    when('/cart', { 
      templateUrl: 'views/shoppingCart.html',
      controller: storeController }).
    when('/delivery', {
      templateUrl: 'views/delivery.html',
      controller: storeController }).
    otherwise({
      redirectTo: '/store' });
}])
  .controller('storeController', storeController);

controller.js：

      function storeController($scope, $routeParams, $http, $interval, DataService) {

  // get store and cart from service
  $scope.store = DataService.store;
  $scope.cart = DataService.cart;
  $scope.mapInit = DataService.mapInit;

  // use routing to pick the selected product
  if ($routeParams.productSku != null) {
    $scope.product = $scope.store.getProduct($routeParams.productSku);
  }

  // var locationOptions = {
  //   enableHighAccuracy: true,
  //   timeout: 5000,
  //   maximumAge: 0
  // }

  // navigator.geolocation.getCurrentPosition(function(pos){
  //   var mapOptions = {
  //     center: { lat: pos.coords.latitude, lng: pos.coords.longitude},
  //     zoom: 13
  //   };
  //   var map = new google.maps.Map(document.getElementById('map'),
  //       mapOptions);
  // });

  $scope.search = function(query){
    var responseObject;
    console.log('in search');
    $http({
      url:'/apiCall', 
      data: {data: '/products?keyword=' + query + '&latlong=36.125962,-115.211263'},
      method: 'POST'
    })
    .then(function(response){
      responseObject = response.data.data;
      responseObject.forEach(function(data){
        var productData = {
          sku: data.Id.SkuPartNumber,
          productName: data.Description.Name,
          desc: data.Description.BrandName,
          price: data.Price.DisplayPrice,
          url: data.Description.ImageURL,
          storeNumber: data.StoreNumber
        }
        var temp = new product(productData)
        $scope.store.addProduct(temp)
      });
    });
  }

  $scope.getDeliveryQuote = function(){
    var responseObject;
    $scope.quoted = false;
    var storeNumber = $scope.cart.items[0].storeNumber
    console.log($scope.cart.items[0].storeNumber);
    var url = '/delivery_quote?drop_off_latlong=36.125962,-115.211263&pickup_store_number='.concat(storeNumber);
    $http({
      url: '/apiCall/',
      data: {data: url},
      method: 'POST'
    })
    .then(function(response){
      $scope.quoted = true;
      console.log(response.data.id);
      $scope.quote = response.data.fee;
      $scope.quoteId = response.data.id
    })
  }

  $scope.submitOrder = function(){
    var url = '/submit_delivery?drop_off_latlong=36.125962,-115.211263&pickup_store_number=0001709&manifest=puppies&phone_number=555-555-5555&quote_id=' + $scope.quoteId + '&customer_name=Arnold';
    $http({
      url: '/apiCall/',
      data: {data: url},
      method: 'POST'
    })
    .then(function(response){
      console.log(response);
      $scope.deliveryId = response.data.id;
      $scope.refreshDelivery();
      window.location.href='/#/delivery';
    })
  }

  $scope.refreshDelivery = function() {
    var url = '/update?delivery_id='.concat($scope.deliveryId);
    var promise = $interval(function(){
      $http({
        url: '/apiCall/',
        data: {data: url},
        method: 'POST'
      })
      .then(function(resp) {
        $scope.update = resp.data;
        if (resp.data.courier){
          $scope.update.courier = resp.data.courier;
          console.log($scope.update.courier.name);//outputs correct name
          $scope.$apply();
        }
        //stops when complete
        if ($scope.update.complete){
          $interval.cancel(promise);
        }
      })
    }, 5000 );
  }
}

module.exports = storeController;

编译为HTML之前的Jade：

部分：

p.text-info {{update.courier.name}} is on their way!

默认值：

html(ng-app='AngularStore')
  head
    // includes for jquery, angular, and bootstrap 
    script(src="https://maps.googleapis.com/maps/api/js?sensor=false")
    script(src='bower_components/jquery/dist/jquery.min.js') 
    script(rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.min.css')
    script(src='bower_components/angular/angular.js')
    script(src='bower_components/angular-route/angular-route.js')
    // includes for the Angular Store app
    script(src='/js/main.js')     
    script(src='/js/bundle.js')     
    link(href='/styles/main.css', rel='stylesheet', type='text/css')
    |   
  body
    .container-fluid
      .row-fluid
        .span10.offset1
          h1.well
            a(href='default.html')
            |                     Angular Store

          div(ng-view='')

Answer 1

通过创建一个单独的控制器来处理更新，我找到了解决$scope问题的方法。

应用程式：

var storeController = require('./controllers/storeController'),
    deliveryController = require('./controllers/deliveryController');



var storeApp = angular.module('AngularStore', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/store', { 
      templateUrl: 'views/store.html',
      controller: storeController }).
    when('/products/:productSku', {
      templateUrl: 'views/product.html',
      controller: storeController }).
    when('/cart', { 
      templateUrl: 'views/shoppingCart.html',
      controller: storeController }).
    when('/delivery/:id', {
      templateUrl: 'views/delivery.html',
      controller: deliveryController }).
    otherwise({
      redirectTo: '/store' });
}])
  .controller('storeController', storeController);

new deliveryController

function deliveryController($scope, $routeParams, $http, $interval) {
  console.log($routeParams);

  var refreshDelivery = function(id) {
    var url = '/update?delivery_id='.concat(id);
    var promise = $interval(function(){
      $http({
        url: '/apiCall/',
        data: {data: url},
        method: 'POST'
      })
      .then(function(resp) {
        $scope.update = resp.data;
        if (resp.data.courier){
          $scope.update.courier = resp.data.courier;
          console.log($scope.update.courier.name);//outputs correct name
        }
        //stops when complete
        if ($scope.update.complete){
          $interval.cancel(promise);
        }
      })
    }, 5000 );
  }
  refreshDelivery($routeParams.id);
}

module.exports = deliveryController;

角度绑定不在$ interval和$ http内更新

1 个答案: