Question

我有follow.js：

'user strict';

var SaurioApp = angular.module('SaurioApp', []);

SaurioApp.controller('SearchCtrl', function($scope, $http){
    $scope.followUser = function(user_id,follow_to_id){
        $http.get('ajax/follow', {
            params: {user_id: user_id,follow_to_id: follow_to_id}
        }).success(function(data){
            $scope.unfollow = '<button class="btn btn-danger" ng-  click="followUser({{Auth::user()->id}},{{$user->id}})">Seguir</button>';
        });
    }

});

和刀片中的视图

<div class="row" ng-app="SaurioApp">
    <div class="col-xs-12 col-sm-12 col-md-12" >
        <p ng-controller="SearchCtrl" >
            @{{ unfollow }}
            <button class="btn btn-primary" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
        </p>
    </div>
</div>

插入成功，但我无法删除＆＃34;关注＆＃34;按钮并附加新的：＆＃34;取消关注。＆＃34;我怎样才能做到这一点？

Answer 1

<div class="row" ng-app="SaurioApp">
    <div class="col-xs-12 col-sm-12 col-md-12" >
        <p ng-controller="SearchCtrl" >
            <button ng-show='unfollow' class="btn btn-danger" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Seguir</button>
            <button ng-hide='unfollow' class="btn btn-primary" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
        </p>
    </div>
</div>

类似于@redoc所说的但有两个按钮，一个用于取消关注，另一个用于跟随

SaurioApp.controller('SearchCtrl', function($scope, $http){
    $scope.followUser = function(user_id,follow_to_id){
        $http.get('ajax/follow', {
            params: {user_id: user_id,follow_to_id: follow_to_id}
        }).success(function(data){
            $scope.unfollow = true;
        });
    }

});

Answer 2

似乎需要进行的唯一更改是CSS类和按钮文本，因此在这种情况下，不要尝试通过作用域发送HTMl代码，只需发送变量并使用ng-class进行切换。像这样：

＆＃39;用户严格＆＃39;;

var SaurioApp = angular.module('SaurioApp', []);

SaurioApp.controller('SearchCtrl', function($scope, $http){
    $scope.followUser = function(user_id,follow_to_id){
$scope.unfollow=false;
        $http.get('ajax/follow', {
            params: {user_id: user_id,follow_to_id: follow_to_id}
        }).success(function(data){
            $scope.unfollow = true;
        });
    }

});

<div class="row" ng-app="SaurioApp">
    <div class="col-xs-12 col-sm-12 col-md-12" >
        <p ng-controller="SearchCtrl" >
            @{{ unfollow }}
            <button ng-class="{btn-danger: unfollow=false }" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
        </p>
    </div>
</div>

您还可以使用以下内容动态更改按钮文本：

 <button value="{{(unfollow=false)? 'Follow' : 'Seguir'}}" ng-class="{btn-danger: unfollow=false }" ng-click="followUser({{Auth::user()->id}},{{$user->id}})"></button>

我认为重点是不需要实际重新创建HTML代码只需更改元素。

当我尝试删除按钮并添加新的时，Angularjs错误？

2 个答案: