如何使用 AngularJS 在 Popover 中显示和隐藏 <div>答案

【问题标题】：How to show and hide <div>'s in Popover using AngularJS如何使用 AngularJS 在 Popover 中显示和隐藏 <div>
【发布时间】：2017-02-08 18:26:19
【问题描述】：

我正在为在线团队协作服务（OTC）开发SPA（单页申请），我包括ng-include的HTML页面，在一些包含的页面中有一个popover，这个包含一种创建公共群聊的可能性，并且为了创建一个，用户必须提交，现在我的问题是：如何在同一个弹出窗口中显示“成功创建”消息，而不是在主 div 中创建群组弹出框？

external page（包含其他页面的页面）：

<div ng-show="ctrChanneldiv" ng-contoller="ctrChannelCon" style="float: right;" class="col-md-3">
    <div ng-include="'CreateChannel.html'" ></div>
</div>

控制器ctrChannelCon：

appvar.controller('ctrChannelCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope){
        $scope.createBtn = function() {
            $http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
                    .success(function(response) {
                        setTimeout(function () {
                            $scope.$apply(function(){
                                //******* Here Display "Successfully Created" In the Popover *******//
                            });
                        });

                    });
           };
      }]);

在CreateChannel.html：

<div>
    <div class="row">
        <a href="#" class="popper" data-toggle="popover"
            data-placement="bottom"><span class="glyphicon glyphicon-plus"></span>Create Channel</a>
        <div class="popper-content hide">
            <div class="form-group">
                <!-- ng-controller="createChannelCon" -->
                <div class="form-group">
                    <label>Channel name:</label>
                </div>
            <div class="form-group">
                <input ng-model="crtchannel.Name" type="text" placeholder="enter channel's name" maxlength="30"
                       class="form-control input-md" required />
            </div>
            <div class="form-group">
                <label>Description:</label>
            </div>
            <div class="form-group">
                <textarea cols="15" ng-model="crtchannel.Description" type="text"
                          placeholder="enter channel's description" maxlength="500"
                          class="form-control input-md" required></textarea>
            </div>
            <div>
                <input ng-model="crtchannel.Type" type="radio" name="chtype"
                       value="private" required /> Private<br> <input
                       ng-model="crtchannel.Type" type="radio" name="chtype"
                       value="public" /> Public<br>
            </div>
            <div class="form-group">
                <button ng-click="createBtn()" class="btn btn primary">Apply</button>
            </div>
        </div>
    </div>
    <script>
        $('.popper').popover({
            container : 'body',
            html : true,
            content : function() {
                return $(this).next('.popper-content').html();
            }
        });
    </script>
</div>
</div>

有什么建议吗？

谢谢

【问题讨论】：

标签： html angularjs twitter-bootstrap

【解决方案1】：

您可以使用ngClass 指令来解决这个问题。 ngClass 指令允许有条件地应用类。在弹出窗口中创建一个成功创建的 div，并在范围内设置一个带有变量的 ng-class 指令，并根据您的要求为其分配 true 和 false。

appvar.controller('ctrChannelCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope){
        $scope.createBtn = function() {
            $http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
                    .success(function(response) {
                        setTimeout(function () {
                            $scope.$apply(function(){
                                //******* Change value of a model *******//
                                $scope.hidden = false;
                            });
                        });

                    });
        };
    }]);

HTML

<span ng-class="{hide: hidden}">Successfully Created</span>

CSS

.hide { display: none; }

【讨论】：

【解决方案2】：

在你的控制器中设置一个成功的标志，并使用这个标志来显示或隐藏成功消息：

...
<div class="form-group">
    <button ng-click="createBtn()" class="btn btn primary">Apply</button>
</div>
<div ng-show="isSuccess">Successfully Created</div>

控制器内部：

$scope.isSuccess = false;
$scope.createBtn = function() {
        $http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
                .success(function(response) {
                    setTimeout(function () {
                        $scope.$apply(function(){
                            //******* Here Display "Successfully Created" In the Popover *******//
                            $scope.isSuccess = true;
                        });
                    });

                });
       };

【讨论】：