javascript - Bootstrap 和 AngularJS 之间的冲突

Question

我使用 Angular 进行页面导航并加载一些图像。现在我想使用 Bootstrap Glyphicon 组件。但是从 Angular 函数加载的图像不适用于 Bootstrap 。当我从 HTML 中删除 bootstrap 时，它开始正常工作。

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>
        <script src = "js/controller.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link type = "text/css" rel = "stylesheet" href= "css/style.css">
        <link type = "text/css" rel = "stylesheet" href= "css/tab.css">
        <link type = "text/css" rel = "stylesheet" href= "css/tooltips.css"> 

还有一篇关于此的文章。但答案对我没有帮助。这就是我发布此内容的原因。

编辑:

<div class = "left-row">
    <div class = "glyphicon glyphicon-home"></div>
</div>

application.controller('app', function($rootScope, $scope) {
    
        $rootScope.imageUrlProfile = 'images/profile-icon.png';
        $rootScope.imageUrlWork = 'images/exp-icon.png';
        $rootScope.imageUrlEdu = 'images/edu-icon.png';
        $rootScope.imageUrlContact = 'images/phone-icon.png';
	
});

application.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/tab1', {templateUrl: 'tab1.html', controller: ProfileCtrl}).
            when('/tab2', {templateUrl: 'tab2.html', controller: WorkCtrl}).
            when('/tab3', {templateUrl: 'tab3.html', controller: EduCtrl}).
            when('/tab4', {templateUrl: 'tab4.html', controller: ContactCtrl}).
            when('/', {templateUrl: 'openingTab.html'}).
            otherwise({redirectTo: '/'});
}]);

function ProfileCtrl($rootScope) 
{
    $rootScope.imageUrlProfile = 'images/profile-icon-clicked.png';
    $rootScope.imageUrlWork = 'images/exp-icon.png';
    $rootScope.imageUrlEdu = 'images/edu-icon.png';
    $rootScope.imageUrlContact = 'images/phone-icon.png';
}

function WorkCtrl($rootScope) 
{
    $rootScope.imageUrlProfile = 'images/profile-icon.png';
    $rootScope.imageUrlWork = 'images/exp-icon-clicked.png';
    $rootScope.imageUrlEdu = 'images/edu-icon.png';
    $rootScope.imageUrlContact = 'images/phone-icon.png';
}

function EduCtrl($rootScope) 
{
    $rootScope.imageUrlProfile = 'images/profile-icon.png';
    $rootScope.imageUrlWork = 'images/exp-icon.png';
    $rootScope.imageUrlEdu = 'images/edu-icon-clicked.png';
    $rootScope.imageUrlContact = 'images/phone-icon.png';
}

function ContactCtrl($rootScope) 
{
    $rootScope.imageUrlProfile = 'images/profile-icon.png';
    $rootScope.imageUrlWork = 'images/exp-icon.png';
    $rootScope.imageUrlEdu = 'images/edu-icon.png';
    $rootScope.imageUrlContact = 'images/phone-icon-clicked.png';
}

<div class = "column1">
					<div class = "tab1 grow">
						<a href = "#/tab1" class = "tooltip">
                            <img ng-src="{{ imageUrlProfile }}">
                            <span>
                                <strong>Profile</strong><br />
                            </span>
                        </a>
					</div>
					<div class = "tab2 grow">
						<a href = "#/tab2" class = "tooltip">
                            <img src = "{{ imageUrlWork }}">
                            <span>
                                <strong>Experience</strong><br />
                            </span>
                        </a>
					</div>
					<div class = "tab3 grow">
						<a href = "#/tab3" class = "tooltip">
                            <img src = "{{ imageUrlEdu }}">
                            <span>
                                <strong>Education</strong><br />
                            </span>
                        </a>
					</div>
                    <div class = "tab4 grow">
						<a href = "#/tab4" class = "tooltip">
                            <img src = "{{ imageUrlContact }}">
                            <span>
                                <strong>Contact Info</strong><br />
                            </span>
                        </a>
					</div>
				</div>

Answer 1

从 HTML 中删除工具提示。

<div class = "tab3 grow">
   <a href = "#/tab3" class = "tooltip">
     <img src = "{{ imageUrlEdu }}">
     <span>
        <strong>Education</strong><br />
     </span>
   </a>
</div>

至:

<div class = "tab3 grow">
   <a href = "#/tab3">
     <img src = "{{ imageUrlEdu }}">
     <span>
        <strong>Education</strong><br />
     </span>
   </a>
</div>

由于 .tooltip 在 bootstrap.css 中具有 opacity:0 样式

.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    visibility: visible;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0);
}