templateUrl中的angularJS无法调用函数答案

【问题标题】：angularJS in templateUrl can't call functiontemplateUrl中的angularJS无法调用函数
【发布时间】：2017-04-06 13:20:51
【问题描述】：

在访问应用程序主之前，我正在使用 Angular 进行页面识别，在 templateUrl: login.html 我什么都做不了！

注意：当我调用 ng-app="myApp" 时会出现此错误：未捕获的错误：[$injector:modulerr]

这里是我的代码 JS：

angular.module('training')
.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'index.html',
        controller: 'mainCtrl'
    })
    .when('/login',{
        templateUrl: 'login.html',
        controller:  'loginCrtl'
    });
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){

$scope.ppp= function(){
    alert('ok');
}


}])
.controller('mainCtrl'......

这里是我的 login.html

<!DOCTYPE html>
<html>
<head>
	<title></title>

           <script src="public/jquery-1.11.2.min.js"></script> 
           <script src="public/jquery-ui.js"></script>
					<script src="bower_components/angular/angular.min.js"></script>
					<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
				  <script src="controllers/app.js"></script>
         <script src="services/apiService.js"></script>
         <script src="controllers/mainCrtl.js"></script>

</head>
<body  ng-controller="loginCrtl">

<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login:  <input type="text" id="login"><br><br>
Password:  <input type="text" id="pass">


<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>

</body>

<style >
	.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</html>

我的 index.html：

<!DOCTYPE html>
<html lang="fr"> 
<head>
    <meta charset="UTF-8">
    <title>Planni</title> 
    <link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
    
    <link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
    <link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
    <link rel="stylesheet" href="mystyle/jquery-ui.css">
            <script src="public/jquery-1.11.2.min.js"></script> 
            <script src="public/jquery-ui.js"></script>
            <script src="public/bootstrap-datepicker.js"></script>
            <script src="node_modules/lodash/lodash.js"></script>
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="bower_components/angular-route/angular-route.min.js"></script>
            <script src="bower_components/moment/min/moment-with-locales.min.js"></script>
            <script src="public/daypilot/daypilot-all.min.js"></script>
            <script src="public/bootstrap-tokenfield.js"></script>
            <script src="public/bootstrap.min.js"></script>
            <!-- <script src="bower_components/angular-route/angular-route.js"></script> -->

                        <script src="controllers/app.js"></script>
                        <script src="services/apiService.js"></script>
                        <script src="controllers/mainCrtl.js"></script>
</head>
<body  data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>

【问题讨论】：

标签： html angularjs

【解决方案1】：

你的 ng-app 在哪里？你的模块是training 调用ng-app ='training' 不是ng-app='myApp' 你的问题是没有像这样设置它使用

angular.module('training',['ngRoute'])

这里设置了一个模块

angular.module('training',[])

这里是一个模块

angular.module('training')

编辑

你这样用

angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl) 
.controller('loginCtrl',loginCtrl)

    function mainCtrl(){
    //
    }

    function loginCtrl(){
     //
     }

或者如果您有另一个包含 loginctr 的模块，请像这样使用

angular.module('anothermodule',[])
    .controller('loginCtrl',loginCtrl)

        function loginCtrl(){
         //
         }

并在培训应用程序中包含它

angular.module('training',['ngRoute','anothermodule'])

【讨论】：

【解决方案2】：

首先，您需要将 ng-app 指令添加到您的 html 文件中。我的建议是将其添加到 html 标签内

<html ng-app="training">

那么在js中，在初始化模块的时候，需要给模块加上空方括号

angular.module('training',[])

我假设您正在使用 ngRoute 的路由器。在这种情况下，您需要将路由模块注入您的training 模块

angular.module('training',['ngRoute'])

【讨论】：

我在培训模块中添加了 ngRoute，但是当我在 html 标签中调用这个应用程序时，我发现了 Uncaught Error: [$injector:modulerr] !!!!
您是否在 index html 中为 ng route 添加了脚本文件
是的：
那是 angular.js 脚本，你应该添加 angular-route 脚本
是的，我补充说你可以在帖子中看到 index.html