角控制器从来没有叫

我试图使用Ionic框架来创建一个应用程序，但我有问题得到一个简单的例子工作。这是HTML：角控制器从来没有叫

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- pouchdb --> 
    <script src="lib/pouchdb/pouchdb.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 

    <script src="js/modules/home.js"></script> 
    <script src="js/controller/home.js"></script> 
</head> 

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

</html>

我app.js

angular.module("App", ["ionic", "App.Home"]) 

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider.state("app", { 
     url: "/app", 
     abstract: true, 
     templateUrl: "templates/home.html", 
    }); 

    $urlRouterProvider.otherwise("/app/home"); 
}) 

.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("App.Home", []) 

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider.state("app.home", { 
     url: "/home", 
     views: { 
      "main": { 
       templateUrl: "templates/home.html", 
       controller: "HomeController" 
      } 
     } 
    }); 
});

正如你可以在这里看到我想要的home.html使用HomeController因此，这里是HomeController

angular.module("App.Home") 

.controller("HomeController", function() { 
    console.log("controller"); 
});

但家庭控制器实际上从未被称为。 logoutput从不出现。我的home.html显示：

<ion-view view-title="Home"> 
    <ion-content> 
     Home 
    </ion-content> 
</ion-view>

我将控制器映射到模板，为什么控制器方法不被调用？

编辑

如果我改变我的home.html的以下内容：

<ion-view view-title="Home"> 
    <ion-content ng-controller="HomeController"> 
     Home 
    </ion-content> 
</ion-view>

它的工作原理。因此，设置ng-controller="HomeController"工作正常，但

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

或

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider.state("app.home", { 
     url: "/home", 
     views: { 
      "main": { 
       templateUrl: "templates/home.html", 
       controller: "HomeController" 
      } 
     } 
    });

不工作。对我来说这没有意义。我想使用stateProvider来设置控制器。

EDIT 2

创建plunker

来源

2015-11-04 Mulgard

控制台中的任何错误？ – taxicala

没有错误。根本没有输出。因为我的home.html的内容正在显示，所以似乎一切正常。但我的“HomeController”的控制器方法永远不会被调用。 – Mulgard

更新了我的帖子。如果我在我的home.html中设置了ng-controller =“HomeController”，它就可以工作。但我想使用stateProvider来设置控制器。 – Mulgard

固定！

控制器在绑定到视图时得到实例化。我将我的抽象状态的templateUrl设置为templates\home.html 这是错误的。我只是不得不做：

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider.state("app", { 
     url: "/app", 
     abstract: true, 
     templateUrl: "", 
    }); 

    $urlRouterProvider.otherwise("/app/home"); 
})

和使用方法：

angular.module("App.Home", []) 

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

因此，没有定义视图。

来源

2015-11-04 18:43:52 Mulgard

角控制器从来没有叫

回答

相关问题