AngularJS angular-seed 启动项目添加指令答案

【问题标题】：AngularJS angular-seed starter project adding directivesAngularJS angular-seed 启动项目添加指令
【发布时间】：2016-01-09 05:06:35
【问题描述】：

我正在尝试使用 angular-seed 项目 (https://github.com/angular/angular-seed) 来启动一个新项目。我正在尝试添加一个新指令。

创建 testDirective.js 文件：

'use strict';

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

将文件包含在index.html中，将“myApp.testDirective”添加到app.js中，在view1.js中我添加了：

'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() {

}]);

view1.html 看起来像：

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

但是，当我运行应用程序时，testDirective 所在的位置没有显示任何内容。不知道我哪里出错了。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

当你想在 html 上使用指令时，你应该把大写字母替换为小写前缀 - 。指令规范化过程在编译指令时将 test-directive 转换为 testDirective。

<div test-directive></div>

【讨论】：

@erichardson30 很高兴听到它有帮助..谢谢 :)

【解决方案2】：

当在 HTML 元素的开始标记中包含属性指令时，它们必须转换为破折号。

<div test-directive>

【讨论】：