Конфликт между Bootstrap и AngularJS

Question

Я использую угловой для навигации по странице и загружаю некоторые изображения. Теперь я хочу использовать компоненты Glyphicon Bootstrap. Но загрузка изображений с угловой функции не работает с бутстрапом. Когда я удаляю bootstrap из моего 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"> 

Был еще один пост об этом. Но ответ мне не помог. Вот почему я публикую это.

Edit:

<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>

Answer 1

Удалить tooltip из 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 имеют opacity:0 стиль в 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); 
}