如何为新页面添加新控制器离子

时间:2017-01-09 08:06:19

标签: angularjs ionic-framework

我创建的应用程序的起始页为login.html,在login.html页面中我有按钮登录,当我点击时,它会显示menu.html页面。

但是当我在menu.htmlapp.js中为controller.js页面添加新控制器时,它会出错。

这是我的代码:

app.js:

angular.module('starter', ['ionic','starter.controllers'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('login',{
            url:'/login',
            templateUrl:'templates/login.html',
            controller: 'LoginCtrl'
        })  
        .state('menu',{
            url:'/menu',
            templateUrl:'templates/menu.html'
            controller:'MenuCtrl'
        })
        .state('menu.search', {
            url: '/search',
            views: {
              'menuContent': {
                templateUrl: 'templates/search.html'
              }
            }
          });

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

controller.js:

angular.module('starter.controllers', [])
.controller('LoginCtrl', ['$scope','$state',function($scope,$state) {
    $scope.data = {};
    $scope.login = function() {
        $state.go('menu');
    };

}])
.controller('MenuCtrl', function($scope, $stateParams) {
    console.log("Hello member");
});

我显示错误:

  

Uncaught SyntaxError:行中的意外标识符:controller:'MenuCrtl'

我如何解决它或如何为menu.html页面添加新控制器?

2 个答案:

答案 0 :(得分:1)

在您的代码中,您错过了comma,因此您收到错误未捕获的SyntaxError:行中的意外标识符:controller:&#39; MenuCrtl&#39; 。< / p>

您的app.js文件需要通过以下代码进行更新

          angular.module('starter', ['ionic','starter.controllers'])
          .run(function($ionicPlatform) {
            $ionicPlatform.ready(function() {
              if(window.cordova && window.cordova.plugins.Keyboard) {     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
              }
              if(window.StatusBar) {
                StatusBar.styleDefault();
              }
            });
          })
          .config(function($stateProvider,$urlRouterProvider){
              $stateProvider
                  .state('login',{
                      url:'/login',
                      templateUrl:'templates/login.html',
                      controller: 'LoginCtrl'
                  })  
                  .state('menu',{
                      url:'/menu',
                      templateUrl:'templates/menu.html',//Here you have missing comma
                      controller:'MenuCtrl'
                  })
                  .state('menu.search', {
                      url: '/search',
                      views: {
                        'menuContent': {
                          templateUrl: 'templates/search.html'
                        }
                      }
                    });

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

请查看此link以了解路由器和Navigate In Ionic Framework。

另请查看此处以了解sidemenu in ionic

希望这会对你有所帮助!!

答案 1 :(得分:0)

menu状态的状态配置对象中的语法错误,在templateUrl之后添加comma

.state('menu',{
        url:'/menu',
        templateUrl:'templates/menu.html',
        controller:'MenuCtrl'
    })