Question

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

HTML：

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

FragmentTransaction

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

Bootstrap和AngularJS之间的冲突

1 个答案: