Bootstrap 和 AngularJS 之间的冲突答案

【问题标题】：Conflict between Bootstrap and AngularJSBootstrap 和 AngularJS 之间的冲突
【发布时间】：2016-06-27 14:00:35
【问题描述】：

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

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>

【问题讨论】：

它显示了什么错误？
@RIYAJKHAN 没有错误，当 bootsrap 存在时不会从角度加载图像
您是否正确链接了 Glyphicon 字体？
你能发布调用图像的sn-p吗？还是小提琴？
从 HTML 中删除 .tooltip 和其他引导相关的类。会解决的。

标签： javascript angularjs html twitter-bootstrap-3

【解决方案1】：

从 HTML 中删除 tooltip。

<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);
}

【讨论】：