Ändern Sie die Schaltfläche Farbe auf der Grundlage der Antwort von $ http

Question

Können Sie mir bitte vorschlagen, wie geklickt Schaltfläche Farbe basierend auf $ HTTP-Antwort ändern. Sollte ich Richtlinien verwenden oder nicht? Bitte vorschlagen.

Answer 1

Erstellen Sie einfach eine Bereichsvariable $scope.buttoncolor und stellen Sie sie entsprechend Ihrer Anforderung ein, wenn Sie die $http Antwort erhalten.

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

    $http.get("welcome.htm") 
    .then(function(response) { 
     $scope.buttoncolor = response.data.buttoncolor; 
    }); 
}); 

und in Ihrem HTML, stellen Sie die Farbe der Schaltfläche ng-style

<button ng-style="{'background-color': buttoncolor }">button</button> 

---

EDIT

ich diese plunker erstellt haben verwenden.

Answer 2

Schauen Sie sich das Beispiel:

angular.module('app', []).controller('parentCtrl1', function($scope, $http) { 
    $scope.makeRequest = function(event) { 
     var d = angular.toJson(model); 
     return $http.get('file.json'); 
    }; 
}).controller('parentCtrl2', function($scope, $http) { 
    $scope.makeRequest = function(event) { 
     return $http.get('/not/an/api/call'); 
    }; 
}).directive('colorBtn', function($log) { 
    return { 
     replace: true, 
     link: onLink, 
     template: '<button ng-click="request($event)">Request</button>', 
     scope: { 
      onClick: '&clickcb' 
     } 
    } 

    function onLink(scope, el, attrs) { 
     scope.request = function($e) { 
      el.removeClass('error').removeClass('success'); 
      if (scope.onClick !== undefined) { 
       scope.onClick({ 
         event: $e 
        }) 
        .then(success, error); 
      } 
     }; 

     function success(response) { 
      el.addClass('success'); 
     } 

     function error(response) { 
      el.addClass('error'); 
     } 
    } 
}); 

Verbrauch:

<div class="parent-1" ng-controller="parentCtrl1"> 
    <color-btn clickcb="makeRequest(event)"></color-btn> 
</div> 

<div class="parent-2" ng-controller="parentCtrl2"> 
    <color-btn clickcb="makeRequest(event)"></color-btn> 
</div> 

<style type="text/css"> 
    .error { background-color: red; color: white; } 
    .success { background-color: green; color: white; } 
</style> 

Arbeiten Plunker: https://embed.plnkr.co/mvpKeGBvdKKnil3QeWuf/