Question

我正在尝试创建指令，但我的指令函数没有被调用。

的index.html

<div ng-repeat="que in questions.Cars">
                             <question-dir>print from direcetive</question-dir>
</div>

ConytrolDirective.js

(function () {
    "use strict";

    angular
        .module("autoQuote")
        .directive('questionDir',["questionDir"] );

    function questionDir()
    {
        return {
            template : "<h1>Made by a directive!</h1>"
        };
    }

}());

Answer 1

您的代码中存在多个错误。

您应该使用功能名称而不是"questionDir"
.directive('questionDir',[questionDir] );
使用指令名称
时，请使用kebab case（-分隔的单词）
```
`<question-dir>print from direcetive</question-dir>`
```
此外，您需要在index.html页面上提及<script src="controlDirectives.js"></script>。

Demo here

Answer 2

我没有在你的代码中看到很多错误，但只有在你发布了你的代码示例链接的情况下，它才能帮助很多人停止假设。

但是你要做的一个主要改变是：改变从

调用的指令定义函数

# filename: tomat_test.py
import sys
import ctypes
import unittest

class TomatTestCase(unittest.TestCase):
    def setUp(self):
        self.lib = ctypes.CDLL('./tomat.so')

    def test_prints_every_second(self):
        seconds = ['00:1', '00:2', '00:2', '00:3', '00:4', '00:5',
                   '00:6', '00:7', '00:8', '00:9']
        self.lib.tomat(10, sys.stdout.fileno())
        self.assertEqual(output, seconds[::-1])

到

.directive('questionDir', ["questionDir"])

See this working fiddle刚刚将.directive('questionDir', questionDir)添加到questions.Cars中，以使答案看起来与您的查询更相关。

保留指令元素的内容：

我在您的问题中看到的是：元素 $rootScope中包含子内容/内部文字<question-dir>，并被指令元素覆盖 print from direcetive完全。

这是Angular的默认属性：元素（正在应用该指令）子项将丢失为指令元素。如果你想坚持元素的原始内容/孩子，你必须转换它。

在指令定义对象中使用<h1>Made by a directive!</h1>，并将transclude : true添加到您希望包含指令内容/文本<div ng-transclude></div>的位置。

代码段：

print from direcetive

Check this one for transclude changes.

有关转换：

的更多信息，请查看这两个链接

Answer 3

你的代码中有一些问题：

在您的IIFE关闭中，您需要传递angular
您需要将指令名称规范化为html元素名称中的kabab大小写：`＆＃39;
您需要在指令注册中包含对目录工厂的引用：.directive('questionDir', questionDir);
缺少模块依赖项数组：.module("autoQuote", []) - 您应该只使用依赖项[]定义一次，因此如果您已在代码中的其他地方使用了它，请忽略此项。
指令定义对象中缺少restrict：restrict: 'E',

如果点击Run code snippet，您会看到此指令现在有效。

＆＃13;

(function (angular) {
    "use strict";

    angular
        .module("autoQuote", [])
        .directive('questionDir', questionDir);

    function questionDir()
    {
        return {
            restrict: 'E',
            template: "<h1>Made by a directive!</h1>"
        };
    }

}(angular));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="autoQuote">
  
    <question-dir>print from direcetive</question-dir>

</div>

＆＃13;

最后，如果您使用的是AngularJS 1.5或更高版本，则应考虑使用component语法。

Angular js：无法创建指令

3 个答案: