如何讓輸入字段的焦點改變時打開或關閉uib-popover

我有一個輸入字段，它具有uib-popover控件。我遵循了關於如何讓指令打開的文檔，但我注意到文檔中的一些差異，以及這裏的關於plnker和SO問題的示例。如何讓輸入字段的焦點改變時打開或關閉uib-popover

在我的HMTL我已經設置了輸入如下：

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
          <label>Password</label><input type="{{user.inputType}}" ng-blur="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Enter Password" id="password" required class="form-control" ng-model="user.newUser.password" uib-popover-template="'myPopoverTemplate.html'" uib-popover-trigger="'focus'"/> 
         </div> 
         <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
          <label>Confirm Password</label> 
          <input type="{{user.inputType}}" ng-keyup="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Confirm Password" id="confirmPassword" required class="form-control" ng-model="user.newUser.confirmPassword"/> 
          <span style="color: red">{{user.message}}</span> 
         </div>

大多數實例，以及對這裏的SO問題，使用的是舊庫的屬性不與uib-開頭*。

此代碼/指令目前正常工作並呈現，但只有在單擊字段後再單擊相同字段才能關閉彈出窗口時才起作用或顯示。我已嘗試focus觸發器和oustsideClick觸發器。除非在字段中單擊，否則兩者都具有不渲染或關閉彈出窗口的相同結果。

版本中使用的框架是：

angularjs 1.5.8
UI，引導1.3.3

改變觸發匹配前面的例子中popover-trigger用於對uib-popover-trigger使用禁用彈出式菜單我有created a working plunker，它演示了正在發生的事情。

任何有關我缺少的或我需要更改的建議。

在此先感謝

來源

2016-10-31 rlcrews

根據tooltip.js說明中，爲了設置一個定製觸發，它需要通過傳遞給$tooltipProvider.options方法trigger選項來指定。根據你的情況爲focus觸發這將是：

app.config(['$uibTooltipProvider', function ($uibTooltipProvider) { 
    $uibTooltipProvider.options({ trigger: 'focus' }); 
    }]);

更新plunker展示瞭如何觸發focus處理提示。

來源

2016-11-01 11:02:57

有你的代碼的問題，請修改如下圖所示：

app.js：

(function() { 
    var app = angular.module('app', ['ui.bootstrap']); 

    app.controller('main',[ '$scope', main]); 
    function main($scope) 
    { 
     vm = this; 

     vm.message = 'hello'; 

     vm.dynamicPopover = { 
     content: 'Hello, World!', 
     templateUrl: 'myPopoverTemplate.html', 
     title: 'Title' 
     }; 
    } 

}());

的index.html

<input class="form-control" uib-popover-template="vm.dynamicPopover.templateUrl" popover-trigger="focus"/>

其實，你不能只將模板的ID傳遞給uib-popover-template屬性，你需要創建一個對象來映射它等待通過。

來源

2016-11-01 02:26:21 llp

如何讓輸入字段的焦點改變時打開或關閉uib-popover

回答

相關問題