AngularJS angular-seed starter project adding directives

Question

I am trying to use the angular-seed project (https://github.com/angular/angular-seed) to start a new project. I am trying to add in a new directive.

Created testDirective.js file :

'use strict';

angular.module("myApp.testDirective", [])
.directive("testDirective",
        function() {
            return {
                template : "<h1>Made by a directive!</h1>"
            };
        });

Included the file in index.html, added "myApp.testDirective" into app.js, in view1.js I added :

'use strict';

angular.module('myApp.view1', ['ngRoute','myApp.testDirective'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', [function() {

}]);

and view1.html looks like :

<p>This is the partial for view 1.</p>
<div testDirective></div>

However, when I run the app, nothing shows up where testDirective is. Not sure where I've gone wrong.

Answer 1

Whenever you wanted to use directive on the html, you should just replace capital letter to small case prefix - with it. Directive normalization process convert that test-directive to testDirective while compiling directive.

<div test-directive></div>

Answer 2

When including attribute directives inside the opening tag of an HTML element, they must be converted to dashes.

<div test-directive>