无法在Angular 1.6中访问html templateUrl
我正在以角1.6创建一个简单的Web应用程序
我为网址“/”创建了一个状态，但似乎有角度无法到达文件，不知道为什么。
文件夹结构是这样的：
所以html像这样加载应用程序：
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>paykey</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="myApp" >
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<div ui-view></div>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/codigo.service.js"></script>
</body>
</html>
具有状态的app.js文件就是这个：
'use strict';
angular
.module('myApp', [
'ui.router',
'$stateProvider',
'$urlRouterProvider'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// .state('home')
.state('main', {
url: '/',
templateUrl: 'views/quote-comps.html',
controller: 'MainT',
controllerAs: 'main'
});
});
所以调试它似乎通过stateProvider行，但html没有显示。我唯一看到的是css中的背景金色，控制台没有错误。
quote-comps.html文件是这样的：
<div ng-controller="MainT" ng-init="init()" style="padding-top: 90px;
padding-left: 20px;">
<div class="bar bar-header disable-user-behavior" >
<div class="header">
<div class="row header-wrapper">
<div class="header-content col text" ng-class="currentPage.title!=undefined ? 'text':''">
<div ng-if="currentPage.title != undefined">
</div>
<img src="images/ICONOS/Logo_banorte_ICO/Logo_Banortexxxhdpi.png" class="bem_image">
<h5 style="text-align: center; color: white; margin-bottom: 0px;margin-top: 0px; font-size: 12px;">Bienvenido</h5>
</div>
</div>
<div class="header-bar" ng-if="currentPage.name.indexOf('login') < 0 && currentPage.name.indexOf('activaToken') < 0 && currentPage.name.indexOf('resynchronize-token') < 0">
<div class="clear"></div>
</div>
</div>
</div>
<div style=" margin-top: 52px;
background-color: #35282B;
height: 450px;
overflow: scroll;">
<h5 style="text-align: center; color: white; font-size: 16px"><!--{{operacion.nombreBeneficario}}-->55 1007 0744</h5>
<h5 style="text-align: center; color: white; ">Has recibido un pago Banorte Móvil por:</h5>
<h3 style="text-align: center; color: white; ">$ {{operacion.importeOperacion}} {{operacion.divisa}}</h3>
<p ng-show="finish" style="text-align: center; font-style: bold; color: white;" ><span>¿Qué deseas hacer?</span></p>
<img ng-show="finish2" class="amount-header ss2" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
<p ng-show="finish2" class="amount-header textBox4">¡El deposito fue exitoso!
</p>
<div ng-show="finish" class="comparison-box" ng-class="{'comparison-box-open' : arrowUp}">
<div class="comparison-header-container" ng-click="openMore('first')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Depositarlo</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp, 'rotate360' : !arrowUp}">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Ingresa:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="amounts-container">
<div>
<p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}">Banco:</p>
<input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp && container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE">
</div>
<span class="comboBox2"></span>
</div>
<div class="wizard-full">
<!--<a href="#/form1"><button class="btn btn-primary btnSeg seg"> Depositar </button></a> -->
</div>
<button class="btn cus2" type="submit" ng-click="cancel()">Depositar</button>
</div>
<div ng-show="finish" class="comparison-box seg" ng-class="{'comparison-box-open' : arrowUp2}" style="">
<div class="comparison-header-container" ng-click="openMore('second')">
<span> <img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"> </img></span>
<span class="comparison-header comboBox">Cobrarlo en un cajero</span>
<img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp2, 'rotate360' : !arrowUp2}" ng-click="restauraE()">
<!-- <img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"> -->
</div>
<div class="amounts-container">
<div>
<p ng-show="mostrarQuieres" class="amount-header textBox" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">¿Quieres generar tu código de referencia para retirar el efectivo en cajero automático?
</p>
<span>
<img ng-show="mostrarAcude" class="amount-header ss1" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" >
</span>
<div ng-show="mostrarAcude" class="amount-header textbox2" ng-class="{'show' : arrowUp2 && container, 'hide' : !arrowUp2}">Acude a cualquier cajero Banorte, selecciona la opcion retiro de efectivo y captura o escanea este código para retirar tu efectivo
</div>
</div>
</div>
<div class="wizard-full">
<!--<button class="btn btn-primary btnSeg2 seg" ng-click="getCode()"> Generar referencia </button> -->
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()">Generar transferencia</button>
</div>
<div ng-show="mostrar">{{codigoBarras}}
<io-barcode code="123" type="CODE128B"></io-barcode>
</div>
</div>
<div ng-show="mostrar" class="wizard-full">
<button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()"> d </button>
</div>
</div>
<div class="footer">
"2017 Derechos reservados."</div>
</div>
依赖关系：
"dependencies": {
"@uirouter/angularjs": "^1.0.11",
"angular": "^1.6.6",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1"
}，
4 个答案:
答案 0 :(得分：1)
来自https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
您似乎需要将$ state.Provider更改为以下内容：
$stateProvider
// .state('home')
.state('main', {
url: '/',
views:{
'quoteCompsView':{
templateUrl: 'views/quote-comps.html',
controller: 'MainT',
controllerAs: 'main'
}
}
});
然后在你的html中添加：
<div ui-view="quoteCompsView"></div>
答案 1 :(得分：0)
更改网址：
.state('main', {
url: '/',
views:{
'quoteCompsView':{
templateUrl: '../views/quote-comps.html',// -------- Here
controller: 'MainT',
controllerAs: 'main'
}
}
答案 2 :(得分：0)
您没有在主索引html文件中添加引用。 我在html页面上看不到任何控制器参考
答案 3 :(得分：0)
我编辑了控制器......
angular.module('myApp',[])
.controller('MainT', MainT);
到
angular.module('myApp')
.controller('MainT', MainT);
并且有效......我真的不知道为什么
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？