angular directive template not loading

Question

my angular directive template is not getting loaded into my app. The js file for the directive is loading fine except the html. I checked the 'net' tab in firebug and its not getting called there either. I am currently not getting any errors.

Here is my directive js:

angular.module('Grid')
.directive('grid', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        templateUrl: 'scripts/grid/grid.html'
    }
});

Here is my directive 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>

finally here is my index.html where it is meant to go

    <!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>

This has app is being broken up into multiple modules as the new recommended structure for angular

tommybananas · Accepted Answer · 2014-09-10 15:39:45Z

3

The grid module needs to be a dependency of your twentyApp module.

angular.module('twentyApp', ['grid'])

answered Sep 10, 2014 at 15:39

tommybananas

5,7361 gold badge31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marneborn · Accepted Answer · 2014-09-10 16:03:34Z

0

Are you sure that the Grid module is being loaded? Try this:

angular.module('Grid', [])
.directive('grid', function() {

answered Sep 10, 2014 at 16:03

marneborn

6993 silver badges9 bronze badges

Collectives™ on Stack Overflow

angular directive template not loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related