简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - $ionicModal与boostrap冲突
黄舟
黄舟 2017-05-15 16:53:04
0
1
569

使用$ionicModal弹出的model窗口

工程引入boostrap3.3.4后 model窗口变成一个黑色的modal层 没有动画 也没有内容

下面是代码大家可以试试，代码很简单，没有及任何特技，然而也并没有出来效果…

index.html

<link rel="stylesheet" href="lib/bootstrap/bootstrap-3.3.4.min.css">

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>

home.html

<ion-view>
    <button ng-click='openModal()'>modal</button>
</ion-view>

modal.html

<ion-modal-view>
    <ion-header-bar class="bar-energized">
        <h1 class="title">ion-modal-view</h1>
        <a class="button" ng-click="closeModal();">关闭</a>
    </ion-header-bar>
    <ion-content>
        Hello!
    </ion-content>
</ion-modal-view>

app.js

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
            url: "/home",
            templateUrl: "templates/home.html",
            controller: 'HomeCtrl'
        });
$urlRouterProvider.otherwise('/home');

controller.js

app.controller('HomeCtrl', function($scope, $state, $ionicModal) { 
   $ionicModal.fromTemplateUrl("templates/model.html", {
        scope: $scope,
        animation: "slide-in-up"
    }).then(function(modal) {
        $scope.modal = modal;
    });

    $scope.openModal = function() {
        $scope.modal.show();
    };

    $scope.closeModal = function() {
        $scope.modal.hide();
    };

});
黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

모든 응답(1)
巴扎黑
巴扎黑2017-05-15 16:55:04 1층

그리드 시스템, 기본 유틸리티, 반응형 유틸리티 등 부트스트랩에 필요한 부분만 소개하시면 됩니다

참조 http://forum.ionicframework.com/t/반응형-그리드-레이아웃/707/20

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！