Warum ist VM nicht dazu verpflichtet?

Question

function ExampleCtrl(HttpGet){ 
    'ngInject'; 

    const vm = this; 
    vm.title = 'test'; 


    HttpGet.get().then(function(response){ 
    console.log(vm.title); //logs 'test'; 
    vm.response = response.data; 
    console.log(vm.response); //logs the response; 

    }); 

} 

export default { 
    name : 'ExampleCrl', 
    fn : ExampleCtrl 
}; 

Meine Ansicht:

{{ home.response }} 

UI Router:

$stateProvider 
    .state('Home', { 
    url : '/home/:page', 
    controller : 'ExampleCtrl as home', 
    templateUrl: 'home.html', 
    title : 'Home' 
    }); 

HttpGet Service:

function HttpGet($http) { 
    'ngInject'; 

    const service = {}; 

    service.get = function() { 
    return new Promise(function(resolve, reject) { 
     $http.get('http://localhost:8000/all').success((data) => { 
     resolve(data); 
     }).error((err, status) => { 
     reject(err, status); 
     }); 
    }); 
    }; 

    return service; 

} 

export default { 
    name: 'HttpGet', 
    fn: HttpGet 
}; 

Ist das nicht der ganze Punkt vm=this zu tun, ist, dass in einem Funktionsblock this ist immer noch gebunden?

Answer 1

Ihr Problem ist unverbindlich this. Es funktioniert gut.

Ihr Problem ist, dass Sie Winkel digest Zyklus verlassen, so dass Ihre HTML-Ansicht nicht aktualisiert wird.

service.get = function() { 
    return new Promise(function(resolve, reject) { 
     $http.get('http://localhost:8000/all').success((data) => { 
     resolve(data); 
     }).error((err, status) => { 
     reject(err, status); 
     }); 
    }); 
    }; 

Hier können Sie neue Versprechen zu schaffen und rufen dann ist es resolve Funktion. Aber es ist native ES6 Versprechen. Wenn es then Handler aufgerufen wird, ist es bereits außerhalb des eckigen Digest-Zyklus.

So sollten Sie rufen ditest manuell

mit

 $http.get('http://localhost:8000/all').success((data) => { 
     $scope.$apply(() => resolve(data)); 
     }).error((err, status) => { 

Aber man kann diese noch einfacher lösen, weil $http.get bereits ein Versprechen zurück. Just do:

service.get = function() { 
    return $http.get('http://localhost:8000/all'); 
    }; 

Und das ist alles. $http.get bereits Digest für Sie aufrufen.

Und wenn Sie jemals wirklich ein Versprechen in Ihrem Winkelcode erstellen müssen, dann verwenden Sie bitte Winkel $q Service statt ES6 verspricht, weil es bereits Digest-Zyklus berücksichtigt.