Der $ scope wird nicht aktualisiert, es sei denn, er wird zweimal aufgerufen.

Question

Siehe meine Codes unten. Es fällt mir schwer, den Wert von $ scope.brand aus meiner Sicht zu zeigen. Wenn ich auf den Benutzermarke Button klicken, passiert nichts. Der brand.name in der Ansicht wurde nicht aktualisiert, aber wenn ich auf die Testmarkenschaltfläche klicke, nachdem ich auf geklickt habe, um die Benutzermarkenschaltfläche zu erhalten, wird der Wert des Bereichs angezeigt. Ich weiß nicht, was jetzt passiert. Bitte helfen Sie. Vielen Dank!

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); 
    } 
}]); 

Ansicht

<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

Das Problem ist hier:

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

$.get ist jquery so, wenn es aktualisiert die $ scope.brand in der Erfolg t Der Digest-Zyklus wird nicht ausgeführt und spiegelt den Wert wider.

Sie sollten die Verwendung des $http Service von Winkel machen für Ajax zu tun:

$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. 
    }); 

Andere Lösung:

In Ihrem jquery ajax Sie den Bereich Variable innerhalb $apply wie folgt zu ändern:

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