javascript - $scope 不更新，除非调用两次

Question

请在下面查看我的代码。在我看来，我很难展示 $scope.brand 的值(value)。当我点击获取用户品牌按钮时，没有任何反应。 View 中的 brand.name 没有更新，但是当我在单击 get user brand 按钮 后单击 test brand 按钮 时，将显示范围的值。我不知道现在发生了什么。请帮忙。谢谢!

Angular

var app = angular.module('nwApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

var url = 'http://localhost:3000';

app.controller('brandsCtrl', ['$scope', '$http', function($scope, $http){

$scope.brands = {};
$scope.brand = {};

$http.get(url+'/brands/all')
    .success(function(result){
        $scope.brands = result;
    });

    $scope.getAssignUser = function(brand_id){
        $.get(url+'/brands/'+brand_id)
            .success(function(result){
                $scope.brand = result;
            });

        $("#brandModal").modal('toggle');
    };

    $scope.checkBrand = function(){
        console.log($scope.brand);
    }
}]);

查看

<a href="javascript:void(0)" class="btn btn-warning" title="Assign User for this Brand" ng-click='getAssignUser(brand._id)' >GET USER BRAND</a>

<a href="javascript:void(0)" class="btn btn-warning"  ng-click='checkBrand()' > TEST BRAND </a>

<div><% brand.name %></div>

Answer 1

问题出在这里:

 $.get(url+'/brands/'+brand_id)
            .success(function(result){
                $scope.brand = result;
            });

$.get 是 jquery，因此当它成功更新 $scope.brand 时，摘要循环将不会运行并反射(reflect)值。

你应该使用angular提供的$http服务来做ajax:

$http({
  method: 'GET',
  url: url+'/brands/'+brand_id
}).then(function successCallback(result) {
     $scope.brand = result;
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

其他解决方案是:

在您的 jquery ajax 中，您可以像这样更改 $apply 中的范围变量:

 $.get(url+'/brands/'+brand_id)
            .success(function(result){
                $scope.$apply(function (){$scope.brand = result;});
            });