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中，使用ng-style

设置按钮的颜色

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

修改

我已经创建了这个plunker。

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>

工作人员：https://embed.plnkr.co/mvpKeGBvdKKnil3QeWuf/

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

2 个答案: