javascript - Angular Directive(指令)模板未加载

标签 javascript html angularjs angularjs-directive

我的 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/

相关文章:

javascript - Hubot 启动时自动加载 .env

javascript - 调用绕过 eval() 的函数

php - Textarea 不使用 ajax 更新换行符

html - 我想同时使用绝对位置和粘性位置。那可能吗?如果是,那么如何?

javascript - 如何在客户端处理 HTTP 错误?

javascript - 用钛金属打造三 Angular 形视觉效果

javascript - 告诉 TypeScript 文件将包含在脚本标签中?

javascript - 单击 span 元素时平滑滚动到特定的 div

angularjs - ngIf 一旦有 Angular

javascript - 将 AngularJS 嵌入到现有的基于 jquery/bootstrap 的网站中