ユーザが8未満のパスワードを入力したときにブールラップの角度を非表示にする

ユーザが無効なパスワードを入力したときにUIブートストラップのポップオーバーを表示したい。これは私のコードですが、popover.itを表示しません。ログはshowChatとhideChatイベントをトリガーしますが、popoverは表示されません。誰かがこの問題を解決するのに役立つことができますか？ユーザが8未満のパスワードを入力したときにブールラップの角度を非表示にする

HTML：

<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)">

Javascriptを：

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

出典

2017-06-16 Niranga Sandaruwan

？最新のバージョンでは '$ tooltipProvider'ではなく' $ uibTooltipProvider'であるので – JeanJacques

パスワードが間違っているとき、またはユーザがボタンをクリックしてパスワードを検証したときだけ、ポップオーバーがトリガされますか？ – JeanJacques

'tooltip-is-open'フラグを' uib-tooltip'ディレクティブ要素に渡すようにしましたか？何か[this]（https://plnkr.co/edit/i6rHnWgWmpa0abZi5mly?p=preview） –

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


});

HTML：** UIブートストラップのバージョン**あなたが使用している

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

出典

2017-06-20 06:41:16

ユーザが8未満のパスワードを入力したときにブールラップの角度を非表示にする

答えて

関連する問題