指令在 angularjs 中不起作用答案

【问题标题】：Directive not working in angularjs指令在 angularjs 中不起作用
【发布时间】：2015-09-16 21:59:19
【问题描述】：

我是 Angularjs 的新手。我正在尝试使用以下代码创建简单的指令：

查看：

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<user-info></user-info>
</div>

</body>
</html>

控制器：

myapp = angular.module("myapp", []);    
myapp.directive('userInfo', function() {
    var directive = {};
    directive.restrict = 'E'; /* restrict this directive to elements */
    directive.template = "My first directive: ";
    return directive;
});

我正在按照本教程学习指令 http://tutorials.jenkov.com/angularjs/custom-directives.html

我收到错误：

http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20w.bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381

这是我的 codepen 链接 http://codepen.io/anon/pen/NGNKxz

【问题讨论】：

您没有在页面中包含您自己的代码。按照错误链接了解更多详细信息。此外，使用 angular.js 的开发版本会在控制台中给出更详细的错误和堆栈跟踪输出
ng-app 模块名称 camelcase myapp 与 myApp 的拼写错误？
我已经添加了我的codepen链接，请查看

标签： angularjs angularjs-directive

【解决方案1】：

您的应用名称有误：

myapp = angular.module("myApp", []); // 不是'myapp'

【讨论】：

好的。那是我的愚蠢错误。感谢您的帮助

【解决方案2】：

添加您的指令

您需要像这样将指令添加到您的 html 中

<script src="path/to/your/directive.js"></script>

或者，如果您使用一个模块，您将链接到主模块。但是请像this 那样重构您的应用程序，它将使代码保持标准和干净。

我有一个 git hub 存储库，我正在以这种结构 here 构建应用程序。祝你好运。

注意

您正在使用最小角度。 Min 非常适合生产，因为它体积小且加载速度更快，但您目前正在开发中，因此请使用完整版本，以便您可以使用浏览器控制台更好地捕获错误。

【讨论】：

感谢您的有用不。我会尝试从中得到一些东西
如果您添加完整版，它确实有助于调试。您会在控制台中遇到真正的错误。但真正检查一下我一直在使用的应用程序结构。希望我很快就会有一个指令。
谢谢。对新手很有帮助。

【解决方案3】：

看起来您没有声明控制器 myCtrl。你的指令看起来不错。

myapp.controller('myCtrl', function() {
});

【讨论】：

不。它不起作用。我已尝试添加控制器。
您是否包含了您的脚本？我在您的代码@Arvaan 中没有看到任何
我为 angularjs 添加了脚本。我不这么认为，我应该为指令添加任何脚本

【解决方案4】：

它是您的 html 文件的当前版本吗？

因为你可能需要链接你的控制器，在头标签之间，插入：

<script src="the js file which contains your controller"></script>

或

<script>Your controller</script>

【讨论】：