第一次單擊豎起大拇指時出現“謝謝”彈出視窗，但即使將觸發器設定為“無”，第二次單擊豎起大拇指時仍會出現
重現步驟：
- 點擊任意點贊，將出現“謝謝”彈出框
- 單擊白色區域以外的任意位置以關閉“謝謝”彈出視窗
- 再次單擊豎起大拇指，“謝謝”彈出視窗仍然出現
在代碼中，我設定了我自己的自定義指令來有條件地設定彈出框觸發器，這樣當點擊一次大拇指時，它會將彈出框觸發器設定為“無”：在元素選項卡中檢查彈出框觸發器確實設定為沒有。
html中的代碼：
<span ng-click="sendFeedback(false, result.id)"
uib-popover="Thanks"
popover-trigger="'outsideClick'"
...
my-directive
shown="this.shown[result.id]">
</span>
控制器中的代碼：
feedbackApp.directive('myDirective', function () {
return {
restrict: 'A',
scope: {
shown: '=',
},
link: function(scope, element, attrs) {
scope.$watch('shown', function(shown) {
if (shown)
attrs.$set('popover-trigger', "none");
}
});
}
};
});
底線是如果用戶打算撤消豎起大拇指，則不應出現“謝謝”彈出框
這是我在公共回購中的完整代碼
uj5u.com熱心網友回復：
您嘗試通過注入更改 DOM attrs.$set('popover-trigger', "none")，但編譯的 AngularUI 模板無法識別。您可以重新編譯模板，但這不是必需的。對于這種簡單的要求，您的方法很復雜。只需我們popover-enable選擇，您就可以了。您無需在指令中處理此問題。也不需要 $watch 。
angular.module('demoApp', ['ui.bootstrap'])
.controller('DemoCtrl', function ($scope, $compile) {
$scope.popoverState = true;
$scope.clicked = function () {
$scope.popoverState = false;
};
});
/* EOF */<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>
<div ng-app="demoApp">
<div ng-controller="DemoCtrl">
<br />
<br />
<br />
<button popover-placement="top"
ng-click="clicked()"
uib-popover="On the top"
type="button"
popover-enable="popoverState"
class="btn btn-default ng-binding"
my-directive>Popover top</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/428395.html
標籤：javascript angularjs 角度-ui-bootstrap 弹出框