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

Question

我正在研究 SPA (单页应用程序)用于在线团队协作服务 (OTC)，我包括 HTML页 ng-include ，在一些包含的页面中有一个 popover ，这个包含创建公共(public)群聊的可能性，为了创建一个，用户必须提交，现在我的问题是:我如何在同一个弹出窗口而不是主 div 中显示“成功创建”消息在弹出窗口中创建组？

external page (包含其他页面的页面):

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

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

有什么建议吗？

谢谢

Answer 1

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

JS

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