Bootstrap和AngularJS之間的衝突

我正在使用angular進行頁面導航並加載一些圖像。現在我想使用Bootstrap Glyphicon組件。但從角度函數加載的圖像不適用於引導程序。當我從我的HTML中刪除bootstrap開始照常工作。Bootstrap和AngularJS之間的衝突

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'; 
 
\t 
 
}); 
 

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

來源

2016-03-12 Lalinda Sampath

一個opacity:0風格它顯示什麼樣的錯誤？ –

@RIYAJKHAN沒有錯誤，不會從角度加載圖像時，靴子有 –

您是否正確鏈接了Glyphicon字體？ –

從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

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

來源

2016-03-12 08:29:01

Bootstrap和AngularJS之間的衝突

回答

相關問題