Question

我正在使用SPA（单页应用程序）进行在线团队协作服务（OTC），我在HTML包含ng-include个页面，在一些包含的页面中有一个{ {1}}，这个包含创建公共群聊的可能性，并且为了创建一个，用户必须提交，现在我的问题是：我如何显示＆＃34;成功创建＆＃34;在popover中创建组的同一个popover中的消息而不是主div？

popover（包含其他页面的页面）：

external page

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

有什么建议吗？

由于

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

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

                });
       };

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

2 个答案: