$ httpからの応答に基づいてボタンの色を変更してください

Question

$ http応答に基づいてクリックしたボタンの色を変更する方法を教えてください。私はディレクティブを使うべきかどうか。提案してください。

Answer 1

$scope.buttoncolorというスコープ変数を作成し、$httpレスポンスを取得する際に必要に応じて設定してください。

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

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

とあなたのhtmlで、私はこのplunkerを作成しましたng-style

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

---

EDIT

を使用して、ボタンの色を設定します。この例では

Answer 2

ルック：

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

使用法：

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

の作業plunker：https://embed.plnkr.co/mvpKeGBvdKKnil3QeWuf/