Question

我正在使用安装了angular模块的ui-bootstrap并且我正在使用此modal我想要一个具有ng-click指令的按钮但是当我点击它时没有任何反应

继承我的代码

<script type="text/ng-template" id="profileModal.html">
        <div class="modal-header">
            <h3 class="modal-title">Profile</h3>
        </div>
        <div class="modal-body" ng-bind-html="content">

        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>

        </div>
</script>

javascript控制器

     if(comparisons.isFollowed){
       outputHTML += '<h5>Follows you</h5>';
     }
     if(!comparisons.doesFollow){
     outputHTML += "<a ng-click='followUser()' href='#' class='btn btn-success space'>Follow User</a>";  
     }else{
       outputHTML += "<button type='button' ng-click='unfollowUser' class='btn btn-warning space'>Unfollow User</button>";
     }
     if(!comparisons.areFriends){
       outputHTML += "<button type='button' ng-click='friendRequest'  class='btn btn-success space'>Send friend request.</button>";  
     }else if(comparisons.hasRequest){
       if(comparisons.sentRequest == currentUser){
       outputHTML += "<button type='button' ng-click='cancelRequest'  class='btn btn-warning space'>Cancel friend request.</button>";    
       }else{
         outputHTML += "<button type='button' ng-click='acceptRequest'  class='btn btn-success space'>Accept friend request</button>";
         outputHTML += "<button type='button' ng-click='declineRequest'  class='btn btn-warning space'>Decline friend request</button>";
       }
     }
     }

     $scope.content = $sce.trustAsHtml(outputHTML);


$scope.followUser = function(){
    console.log("test");
    $http({ url: '/api/v1/user/' + currentUser + '/follow/' + searchedUser, method: 'POST'}).then(function successCallback(response) {
      console.log(response);
    });
  };

Answer 1

不要为href属性赋值。这样做会改变页面上的痕迹/重新加载它。从锚点标记中删除href：

<a ng-click='followUser()' class='btn btn-success space'>Follow User</a>

并且您的点击处理程序将起作用。

看看这个JSFiddle：

http://jsfiddle.net/wvy37/22/

Answer 2

您需要将HTML DOM操作从控制器移动到HTML模板 - 您仍然可以使用控制器中的模型值来驱动它。

类似

<a ng-click='followUser()' href='#' class='btn btn-success space' ng-if="comparisons.doesFollow">Follow User</a>

Answer 3

由于您正在动态创建HTML，因此您需要让Angular知道绑定您的元素。我只是在指令中做过这个，所以我不完全确定控制器的语法（你可以轻松地将整个模态转换为指令btw）。

看看编译服务： https://docs.angularjs.org/api/ng/service/ $编译

为什么这个ng-click不起作用？

3 个答案: