彈出窗口和離子導航視圖不起作用

我需要一些非常基本的AngularJS在我的應用程序。我做了我的彈出式工作，然後添加了ion-nav-view。兩個元素都起作用，但不是同時發生現在離子導航視圖完美的作品，但是當我改變

body ng-app="starter"

到

body ng-app="starter" ng-controller="PopupCtrl"

應用變成空白點。

它一定是一些小錯誤，但我找不到，它在哪裏。誰能幫我？我app.js：

angular.module('starter', ['ionic']) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if (window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

angular.module('starter', ['ionic']) 
    .controller('PopupCtrl', function($scope, $ionicPopup, $timeout) { 
    $scope.showAlert = function() { 
     var alertPopup = $ionicPopup.alert({ 
     title: 'Alert', 
     template: 'Alert text' 
     }); 
    }; 
    }); 

    angular.module('starter', ['ionic']) 
    .config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('list', { 
     url: '/1', 
     templateUrl: 'list.html' 
     }) 
     .state('info', { 
     url: '/2', 
     templateUrl: 'info.html' 
     }) 

    $urlRouterProvider.otherwise("/1"); 
    })

編輯：的index.html

主體部分：

<body ng-app="starter" ng-controller="PopupCtrl"> 

    <ion-nav-bar class="bar-positive" align-title="center"> 
    </ion-nav-bar> 

    <ion-nav-view class="slide-left-right"></ion-nav-view> 

    <script id="list.html" type="text/ng-template"> 
    <ion-view title="title"> 
     <ion-nav-buttons side="right"> 
     <button class="button button-icon icon ion-android-locate" ng-click="showAlert()"></button> 
     </ion-nav-buttons> 

     <ion-content> 
     <div class="list"> 
      <a class="item item-thumbnail-left" href="#"> 
      <img src="cover.jpg"> 
      <h2>Pretty Hate Machine</h2> 
      <p>Nine Inch Nails</p> 
      </a> 
      <a class="item" ui-sref="info"> 
      <p>Żeby uzyskać pomoc, dotknij to pole.</p> 
      </a> 
     </div> 

     </ion-content> 
    </ion-view> 
    </script> 

    <script id="info.html" type="text/ng-template"> 
    <ion-view title="Informacje"> 
     <ion-content class="padding"> 
     <div class="card"> 
      <div class="item item-text-wrap"> 
      <img src="img/logo.png" style="width: 100%"> 
      </div> 
     </div> 
     </ion-content> 
    </ion-view> 
    </script> 


</body>

來源

2015-09-13 user293761

添加模板質疑。 –

你需要調用'$ scope.showAlert（）'，這樣才能顯示警報 –

@PankajParkar問題是當我將'ng-controller =「PopupCtrl」'添加到body時，我的應用變成完全空白。打電話什麼都不可能。 – user293761

模塊應具有相關性，而你是喜歡這裏創造它，你沒有得到angular.module('starter', ['ionic'])但注入同時消耗它，你需要使用angular.module('starter')，因爲模塊已經創建。如果你再次做同樣的事情，那麼該模塊的以前註冊的組件將被刷新。

就像在你的代碼，你需要使用angular.module('starter')在定義controller & config

代碼

angular.module('starter', ['ionic']) 
.run(function($ionicPlatform) { 

    //code here 

}) 

angular.module('starter')//<-- change here 
    .controller('PopupCtrl', function($scope, $ionicPopup, $timeout) { 

    //code here 

    }); 

    angular.module('starter') //<-- change here 
    .config(function($stateProvider, $urlRouterProvider) { 

    //code here 

    })

來源

2015-09-13 22:00:49

它的工作原理。謝謝:) – user293761

@ user293761很高興幫助你..謝謝:) –

彈出窗口和離子導航視圖不起作用

回答

相關問題