$ ionicModal.fromTemplateUrl undefined不是函数

时间:2014-10-25 11:24:34

标签: angularjs ionic-framework

我想在我的应用程序中创建一个ionicModal表单,但它总是说:

TypeError: undefined is not a function
    at new AppController (http://127.0.0.1:58710/www/js/home/AppController.js:15:17)
    at invoke (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11591:17)
    at Object.instantiate (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11602:23)
    at http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14906:28
    at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2797:28
    at nodeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14336:13)
    at compositeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13730:13)
    at publicLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13626:30)
    at updateView (http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2733:23)
    at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2697:11 <div ui-view=""> 

我的代码是:

function AppController($scope, $log, $state, $ionicModal) {
'use strict';



$scope.days = [];
var column = [];



// Load the modal from the given template URL
console.log(JSON.stringify($ionicModal) + "lalala");


$ionicModal.fromTemplateUrl('templates/home/selectedDay.html', function ($ionicModal) {
    $scope.modal = $ionicModal;

    $scope.modalRightButtons = [
        {
            type: 'button-clear',
            content: 'Close',
            tap: function (e) {
                $scope.modal.hide();
            }
        }];
}, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
});

$scope.openModal = function () {

    $scope.modal.show();

};

这与示例中的完全相同我只是不知道我做错了什么... 我的app.js是:

var App = angular.module('App', ['ionic', 'ngResource', 'ui.router']);
App.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home', {
            url: '/home',
            views: {

                'Header': {
                    templateUrl: 'templates/home/homeHeader.html',
                    controller: 'homeHeaderController'
                },
                '': {
                    templateUrl: 'templates/home/calendar.html',
                    controller: 'AppController'
                }
            }
        })

    $urlRouterProvider
        .otherwise('/home');

});


App.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }

    });
});

App
    .controller('AppController', ['$scope', '$log', '$state', '$localstorage', AppController])

我有一个其他应用程序,一切正常。我不明白这里有什么不对......

修改

我更改了AppController的第一行,现在我收到了另一个错误。

新的第一行:

function AppController($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {

新错误:

  

“无法读取来自未定义的'templateUrl'的属性”

1 个答案:

答案 0 :(得分:3)

问题在于依赖注入(DI)。如果您计划缩小代码,则使用的语法很好,但您必须在两个位置以完全相同的顺序声明完全相同的依赖项。您的AppController对象具有比在angular.controller()方法中声明的更多依赖性。

控制器功能

function AppController ($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
...
}

角度控制器声明

App.controller('AppController', ['$scope', '$log', '$state', 'Api', '$localstorage', '$ionicSideMenuDelegate', '$ionicPopup', '$ionicModal', AppController]);