Question

所以我有我的索引页面：

<!DOCTYPE html>
<html ng-app="application" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="app/app.js"></script>
</head>
<body>

    <!-- Place where the page will be rendered at -->
    <div ng-view>
    </div>

</body>
</html>

应用程序如下所示：

var application = angular.module('application', ["ngRoute"]);

application.config(["$routeProvider", "$locationProvider",
    function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: "app/ListContactsForm/lcTemplate.html",
                controller: "HomeController"
            })
            .otherwise({
                redirectTo: "/home"
            });
        //$locationProvider.html5Mode(true);
    }]);



application.controller("HomeController",
    ["$scope", "$location", "DataService",
    function ($scope, $location, DataService) {

        alert("home hit!");

    }]);

lcTemplate.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>aaaa</title>
</head>
<body>
    I'm here!!
</body>
</html>

问题在于渲染了lcTemplate，我得到了“我在这里!!”消息，但他永远不会调用HomeController函数。为什么会这样？

Answer 1

您必须从模板中删除完整的HTML定义，因为视图是在

中呈现的

 <div ng-view>
    </div>

lcTemplate.html：应该像

<div>I'm here!!</div>

Answer 2

问题在于注入不存在的DataService（我删除了服务）。

Error: [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=DataServiceProvider%20%3C-%20DataService%20%3C-%20HomeController

需要完成的更改全部在应用程序代码中：

var application = angular.module('application', ["ngRoute"]);

application.config(["$routeProvider", "$locationProvider",
    function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: "app/ListContactsForm/lcTemplate.html",
                controller: "HomeController"
            })
            .otherwise({
                redirectTo: "/home"
            });
        //$locationProvider.html5Mode(true);
    }]);



application.controller("HomeController",
    ["$scope", "$location",
    function ($scope, $location) {

        alert("home hit!");

    }]);

Answer 3

您尚未声明“DataService”。例如：我在model_services.js

中有我的服务

var services = angular.module('ModelServices');

services.factory('DataService', ['$resource', function($resource){
 var DataService = $resource('/api/data/:id', {id: "@id" });

 return DataService;
}]);

此方法用于调用任何消费服务。 '/ api / data /：id'是您的API Rest路径。

之后，您必须在配置应用程序中添加模块，例如“ModelServices”

var application = angular.module('application', ["ngRoute", "ModelServices"]);

现在您可以从控制器中调用“DataService”

application.controller("HomeController",
    ["$scope", "$location", "DataService",
    function ($scope, $location, DataService) {

        console.log("home hit!");

 }]);

我不知道你是否可以从控制器调用“alert”但我确定你可以使用console.log。

正如你所说@omegasbk“问题在于注入不存在的DataService（我删除了服务）。”如果您尚未在应用程序中声明包含“DataService”对象的模块，则无法在控制器中使用此对象。

没有调用AngularJS控制器函数

3 个答案: