Ajax调用后AngularJS替换按钮

Question

我有一个“最喜欢/不喜欢”按钮，一旦用户点击它就会切换它的功能。

<button id="favoriteButton" class="btn btn-default btn-sm" type="button" ng-click="@Model.GetFavoriteClick()">
    <span aria-hidden="true" class="@Model.GetFavoriteClass()"></span> @Model.GetFavoriteText()
</button>     

在我的控制器中，我正在以这种方式处理点击；

$scope.Favorite = function (providerContentId) {
        var request = $http({
            method: "post",
            url: "/api/Favorite",
            params: {
                // query string params
            },
            data: {
                providerContentId: providerContentId
            }
        });
        request.then(function (response) {
            // here is it replacing but new ng-click is not working
             var element = angular.element(document.querySelector('#favoriteButton'));
                element.replaceWith(response.data);
        }, function (response) {
            alert(response.data);
        });
    };

在我搜索时，我发现我会使用 $compile 服务来执行此操作，但我不能 让它工作。

 var content = $(response.data);
                angular.element(document).injector().invoke(function ($compile) {
                    var scope = angular.element(content).scope();
                    $compile(content)(scope);

我该怎么做？

Answer 1

你可以试试

element[0].outerHTML = response.data; 

而不是

element.replaceWith(response.data);

Answer 2

你应该使用 ng-class

示例：

  <button ng-class="{'btn-favorite': isFav,'btn-unfavorite': !isFav}" ng-click="Favorite();" id="favoriteButton" class="btn btn-default btn-sm" type="button">
   <span aria-hidden="true" class="@Model.GetFavoriteClass()"></span>
 </button>

并添加您的函数 Favorite() ：

$scope.isFav = ! $scope.isFav;