使用AngularJS動態更改Bootstrap工具提示的數據位置時不起作用

Question

當我打開頁面時，第一次將鼠標指針懸停在段落列表（ q1 ， q2 ， q3 ， q4 ）上時， tooltip的data-placement屬性設置為左側。

預期：當我單擊“展開視圖”鏈接時，我正在調用方法changePlacement ，其中我將$scope.changeDataPlacement的范圍值$scope.changeDataPlacement為'right' ，但data-placement未更改為'right' .. 。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.items = ['q1', 'q2', 'q3', 'q4']; $scope.changePlacement = function() { $scope.changeDataPlacement = 'right'; console.log($scope.changeDataPlacement); alert("data-placement@ right side:" + $scope.changeDataPlacement); }; $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); });

 <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <div ng-app="myApp" align="center" ng-controller="myCtrl"> <a href="javascript:;" ng-init="watchlistexpand = null;changeDataPlacement='left'" ng-click="watchlistexpand = !watchlistexpand; changePlacement();" title="{{ watchlistexpand ? 'Compact' : 'Expand'}} View">{{ watchlistexpand ? 'Compact' : 'Expand'}} View</a> <div ng-repeat = "item in items"> <a href="#" data-toggle="tooltip" data-placement="{{(changeDataPlacement === 'left')? 'left':'right'}}" title="Hooray!">{{item}}</a> </div> </div> </body> </html>

Answer 1

問題：

這個問題與AngularJS並沒有真正的關系，而是因為jQuery和Bootstrap的工作方式。 在您的代碼中，當您單擊“展開視圖”時， changeDataPlacement的值將更新為'right' ”。 並且，如果您檢查HTML，則會看到此data-placement="right" ，這意味着它已由AngularJS正確呈現。

之所以data-placement="right"不起作用的原因是，Bootstrap的tooltip僅在初始化時考慮data-placement的值，這種情況在您的情況下是在頁面加載的。 因此，即使您以后以編程方式（使用Javascript，jQuery或AngularJS）更改data-placement的值，也不會在tooltip上反映此更改。

解決方案：

要解決此問題，您可以銷毀tooltip ，然后使用新的放置位置再次對其進行初始化（不推薦）。 或者最好更改已初始化的tooltip ，如下所示：

$('#tooltip').data('bs.tooltip').options.placement = 'right';

這將在單個tooltip上起作用，要在所有tooltip中進行更改，您可以執行以下操作：

$('[data-toggle="tooltip"]').each(function() {
    $(this).data('bs.tooltip').options.placement = 'right';
});

您可以將其放在您的changePlacement函數中，它將像在此Codepen中一樣正常工作。

或者，您可以使用AngularJS Way來實現 ，即$watch changeDataPlacement的更改，並在其值更改時運行此代碼段。 像這樣：

$scope.$watch('changeDataPlacement', function(placement) {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).data('bs.tooltip').options.placement = placement;
    });
});
// Then in your function, you simply do this:
$scope.changePlacement = function() {
    $scope.changeDataPlacement = 'right';
};

這是另一個Codepen，展示了以后的實現。

使用AngularJS動態更改Bootstrap工具提示的數據位置時不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2018-01-07 15:45:00

問題：

解決方案：

使用AngularJS動態更改Bootstrap工具提示的數據位置時不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2018-01-07 15:45:00

問題：

解決方案：

解決方案1
1 已采納 2018-01-07 15:45:00