Javascript 当用户输入小于8的密码时隐藏并显示有角度的ui boostrap弹出窗口_Javascript_Angularjs_Angular Ui Bootstrap

Javascript 当用户输入小于8的密码时隐藏并显示有角度的ui boostrap弹出窗口

javascript angularjs

Javascript 当用户输入小于8的密码时隐藏并显示有角度的ui boostrap弹出窗口,javascript,angularjs,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui Bootstrap,当用户输入无效密码时，我想显示UI引导popover。这是我的代码。但它不显示popover。当我查看日志时，它会触发showChat和hideChat事件。但popover不显示。有人能帮助解决此问题吗 HTML: angular.module（'demoModule'，['ui.bootstrap']）；角度.module（'demoModule'）.config（函数（$uibTooltipProvider）{ }); 角度.module（'demoModule'）。控制器（'Popov

当用户输入无效密码时，我想显示UI引导popover。这是我的代码。但它不显示popover。当我查看日志时，它会触发showChat和hideChat事件。但popover不显示。有人能帮助解决此问题吗

HTML:

angular.module（'demoModule'，['ui.bootstrap']）；
角度.module（'demoModule'）.config（函数（$uibTooltipProvider）{
});
角度.module（'demoModule'）。控制器（'PopoverDemoCtrl'，函数（$scope）{
$scope.passValid=function（）{
如果（$scope.isNumber（）&&
$scope.isCharCount（））| |！$scope.password）{
返回true；
}否则{
返回false；
}
};
$scope.isCharCount=函数（）{
如果（$scope.password！==“”&&&$scope.password.length您正在使用哪个版本的UI Boostrap？因为在最新版本中，它不再是$tooltipProvider
，而是$uibTooltipProvider
，并且您希望在密码不正确时或仅当用户单击按钮验证其密码时触发弹出框？您是否尝试了工具提示为open
标志传递给uib tooltip指令元素。支持@JeanJacques tooltipProvider。密码无效时应触发弹出窗口。
<a href="" id="popoverpassword" class="fa icon-iml-info"
    popover-placement="left" 
    audiochat-popover
    popover="ddssvssvs"
    popover-title="sdvsvsvvvdsvs"
    popover-trigger="showChat"
    ></a>
    <input ng-model="password" ng-change="vCharCount(password)">

angular.module('testpopover', ['ui.bootstrap'])
.config(['$tooltipProvider', function($tooltipProvider){
    $tooltipProvider.setTriggers({
        'showChat': 'hideChat'
    });
}])    
.directive('audiochatPopover', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) { 
            scope.$watch('showPopover', function() {
                if(scope.showPopover) {
                  console.log('trigger showChat')
                    element.get(0).dispatchEvent(new Event("showChat"));
                } else {
                   console.log('trigger hideChat')
                    element.get(0).dispatchEvent(new Event("hideChat"));
                }
            });
        }
    };
})
.controller('RoomController', function($scope) {
    $scope.showPopover = false;


     $scope.vCharCount = function() {
            if ($scope.password !=="" && $scope.password.length >= 8) {

                $scope.showPopover = false;
                return false;
            }else{

               $scope.showPopover=true

               return true;
            }
        };  
});

angular.module('demoModule', ['ui.bootstrap']);

angular.module('demoModule').config(function ($uibTooltipProvider) {

});

angular.module('demoModule').controller('PopoverDemoCtrl', function ($scope) {


     $scope.passValid = function() {
            if ((   $scope.isNumber()    &&
            $scope.isCharCount()) || !$scope.password) {


                return true;
            } else {


                return false;
            }
        };



    $scope.isCharCount = function() {
            if ($scope.password !=="" && $scope.password.length <= 8) {


                return true;
            }else{



               return false;
            }
        };

     $scope.isNumber = function() {
            var matches = $scope.password ? $scope.password.match(/\d+/g) : undefined;
            if (matches !== null) {
                return true;
            }
            return false;
        };


});

<body ng-controller="PopoverDemoCtrl">


   <input type="text" ng-change="vCharCount(password)" ng-model="password"/>


  <i class="fa fa-link add-link" popover-placement="right" uib-popover-template="'password-pop'" popover-is-open="!passValid()" popover-title="New link"></i>


  <script type="text/ng-template" id="password-pop.html">
    <h1>Invalid Password</h1>

  </script>