我的 Angular Directive(指令)模板未加载到我的应用程序中。除了 html 之外,该指令的 js 文件加载正常。我检查了 firebug 中的“net”选项卡,它也没有被调用。我目前没有收到任何错误。
这是我的指令 js:
angular.module('Grid')
.directive('grid', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
templateUrl: 'scripts/grid/grid.html'
}
});
这是我的指令 html:
<div id="game">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div>
<div class="tile-container">
<div tile ng-model="tile" ng-repeat="tile in ngModel.tiles track by $index"></div>
</div>
最后这是我的index.html,它应该去的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="styles/game.css" />
<script type="application/javascript" src="scripts/libraries/angularjs.js" ></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/game/game.js"></script>
<script type="application/javascript" src="scripts/grid/grid.js"></script>
<script type="application/javascript" src="scripts/grid/grid_directive.js"></script>
</head>
<body ng-app="twentyApp">
<!-- header -->
<div class="container" ng-include="'views/main.html'"></div>
<!-- script tags -->
<div id="game-controller">
<div grid ng-model="ctrl.game" class="row"></div>
</div>
</body>
</html>
这个应用程序被分解为多个模块,作为 Angular 的新推荐结构
最佳答案
grid
模块需要成为 twentyApp
模块的依赖项。
angular.module('twentyApp', ['grid'])
关于javascript - Angular Directive(指令)模板未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25769365/