根据$http的响应更改按钮颜色

Can you please suggest me how to change clicked button color based on $http response. Should I use Directives or not. Please suggest.

你能建议我如何根据$http响应改变点击按钮的颜色吗?我是否应该使用指令。请建议。

2 个解决方案

#1

just create a scope variable $scope.buttoncolor and set it according to your need when getting the $http response.

只需创建一个范围变量$scope。在获取$http响应时，根据需要设置按钮颜色。

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

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

and in your html, set the color of button using ng-style

在html中，使用ng样式设置按钮的颜色

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

EDIT

编辑

I've created this plunker.

我创建了这个砰砰作响。

#2

Look at this example:

看看这个例子:

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

Usage:

用法:

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

Working plunker: https://embed.plnkr.co/mvpKeGBvdKKnil3QeWuf/

工作恰好:https://embed.plnkr.co/mvpKeGBvdKKnil3QeWuf/

#1