當用戶輸入密碼小於8時隱藏並顯示角度UI助推彈出

我想在用戶輸入無效密碼時顯示UI Bootstrap彈出。這裏是我的code.but它不顯示popover.it我看日誌會觸發showChat和hideChat事件，但popover不顯示。有人可以幫助解決此問題嗎？當用戶輸入密碼小於8時隱藏並顯示角度UI助推彈出

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

是否使用的是** UI自舉**的版本？因爲在最新版本中，它不再是'$ 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：

<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時隱藏並顯示角度UI助推彈出

回答

相關問題