Question

我有新手问题。

我的应用程序中需要一些非常基本的AngularJS。我做了弹出式工作，然后添加了离子导航视图。这两个元素都可以，但不能同时运行现在离子导航视图效果很好，但是当我改变时

body ng-app="starter"

到

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

app变成了空白网站。

这一定是一个小错误，但我无法找到，它在哪里。谁能帮我？我的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>

Answer 1

模块应该在创建时注入依赖项，就像你在angular.module('starter', ['ionic'])这样创建它一样，但在使用它时你需要使用angular.module('starter')，因为模块已经创建了。如果你再次做同样的事情，那么该模块的先前注册的组件将被刷新。

与您的代码一样，您需要在定义angular.module('starter')时使用controller＆amp; 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

  })

弹出窗口和离子导航视图不会起作用

1 个答案: