Question

我有一个＆＃34;最喜欢/不喜欢的＆＃34;一旦用户点击它就会切换它的按钮。

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

在Ajax调用之后，AngularJS替换按钮

2 个答案: