5

在研究了各种不同的项目并阅读了尽可能多的文档之后，我遇到了如何在我的应用程序中包含指令的问题。该应用程序设置如下：

app.js - 只是顶部

angular.module('ngDashboard', ['ngCookies','ngResource','ngDashboard.filters', 'ngDashboard.services', 'ngDashboard.directives'])

所有模块都可以正常工作，除了（它是一个从示例重写的应用程序）对于根本不起作用的指令：

directives.js - 以下内容不起作用，也不会在视图上执行指令：

angular.module('ngDashboard.directives', []).
  directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        compile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

同一directives.js 文件中的以下内容正常工作并且指令执行：

angular.module('ng').directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        compile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

HTML 很简单：

<funky-element>
    Parse me... come ooooon! Just parse meee!
</funky-element>

我的问题是，包含一组指令的正确方法是什么，以及为什么第一个示例（使用 ngDashboard.services）不起作用。

4

1 回答 1

5

事实证明，我拥有的 app.js 文件要么被缓存，因此指令依赖项不存在，要么我忽略了保存它（周末工作和深夜都可能）。由于在我对 app.js 进行更新后此问题已得到解决，因此我将通过以下建议将其标记为已解决：

  1. 检查脚本控制台以确保您的文件没有被缓存
  2. 完全关闭缓存，或使用隐身模式。
  3. 始终确保将 ng-app 添加到您的文档中（并非如此，但可以帮助其他人）
  4. 确保保存文件
  5. 当您累了并学习新的编程语言/框架时，请多喝咖啡。

最后，关于 Angular，我没有意识到你可以向ng模块添加指令并且它们会变得可用。我确信这不是最佳实践，但对于测试和组合快速代码，它可能会派上用场。

于 2013-04-22T15:01:46.210 回答