角度ui-bootstrap彈出不起作用

我得到了一個使用角度'ng-repeat'生成的列表，並且我希望如果一個項目被點擊，它會彈出一個彈出窗口來顯示一些信息。我嘗試了幾次，但似乎不能正常工作。看到plunker a list demo in plunker 我的代碼角度ui-bootstrap彈出不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script> 
    <script src="controller.js"></script> 
</head> 

<body> 
    <div ng-app="my-app" ng-controller="controller"> 
    <div class="row"> 
     <div class="col-xs-12" style="text-align:center;"> 
     <h2>Here is a list a weapons</h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top"> 
     <div class="col-xs-6"> 
      <div class="panel" style="text-align:center;"> 
      <img src="{{item.img}}" height="120px" width="auto"> 
      </div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="panel"> 
      <div class="panel-body" style="min-height:120px;"> 
       <div><b>Category:</b>&nbsp;{{item.title}}</div> 
       <p><b>Desc:</b>&nbsp;{{item.desc}}</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 

</html>

來源

2016-12-29 David LIu

'酥料餅觸發=「無「'？ –

@OmriAharon我嘗試使用popover-enable和popover-open來控制popover。如果用戶單擊項目這兩個條件都滿足，那麼彈出窗口將顯示正確？ –

'popover-enable'控制觸發器，如果你將它設置爲none，我就不知道會發生什麼。嘗試用默認的點擊並從那裏拿走。 –

在這裏，我添加的代碼示例..

你是在裝貨前角UI的引導，所以它失敗了（我把angular.js後UI自舉）：

<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="[email protected]"></script> 
<script data-require="[email protected]*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

的日期選擇器的指令是不會被調用，因爲它需要「uib-」（注UIB-日期選擇器）：

<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>

的日期選擇器指令也不會被調用，因爲它需要「uib-」（注UIB-日期選擇器）：

<script id="calendar.html" type="text/ng-template"> 
    <uib-datepicker ng-model="date" show-weeks="false"></datepicker> 
</script>

並檢查output ..

來源

2016-12-29 09:50:38

角度ui-bootstrap彈出不起作用

回答

相關問題