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

我尝试了

$apply（）

和

$digest（）

的不同变体，但都没有成功

一旦courier的名称不再为null，绑定就应该更新，但是什么也没有发生。我已经能够在指定信使时记录他们的名字，但是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之前：

部分：

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='')

---

我找到了解决

$scope

问题的方法，创建了一个单独的控制器来处理更新

应用程序：

新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;

---

您的javascript看起来是正确的（当使用

$http

时，您不需要触发

$digest

），因此您的标记必须位于问题所在的位置-您可以显示其余部分吗？在成功回调中，第一行设置

$scope.update

并有条件地设置

$scope.update.courier.name

。由于您已经将

$scope.update

设置为

resp.data

，如果设置了

resp.data.courier

，是否会将

$scope.update.courier.name

隐式设置为

resp.data.courier.name

？我认为这是您的问题，您没有设置对象，但是属性。听起来更像是范围问题。html是否显示在具有独立作用域的指令中？@GPicazo我声明它是因为隐式定义不起作用。@charlietfl我只为整个应用程序使用一个控制器，并显示一个函数$scope.update未在其他任何地方使用。

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;