有没有更好的方法来创建代码指令对象

Question

angular.element('<my-directive></my-directive>')

为什么我不能直接说我的指令的名字?在js中写HTML行似乎很奇怪…

在内存中创建指令实例有更好的方法吗?

Answer 1

编写指令的常见模式是这样的:

angular.module('myApp.directives', ['myApp.services'])
    /*
        toggleclass
        A generic directive for toggling a class directly on an element
        or by specifying a toggle-target option
        eg. toggleclass="{class: 'open', target='.element'}"
    */
    .directive('toggleclass', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                element.on('click', function(){
                    var ops = scope.$eval(attrs.toggleclass);
                    // If a toggle-target is set
                    if(ops.target){
                        element = angular.element(document.querySelector(ops.target));
                    }
                    // Toggle the class
                    element.toggleClass(ops.class);
                });
            }
        }
    });
});

Answer 2

angular.element('<my-directive></my-directive>')

这段代码并没有真正创建一个指令，它只是创建了一个标记为"my-directive"的元素。

顺便说一下，你不需要结束标签。angular.element('<my-directive>')是有效的

如果您想获得详细信息:angular.element(document.createElement('my-directive'))。

这是一种jQuery光。

要实例化一个指令，你需要编译一些DOM并传递作用域。

var e = angular.element('<my-directive></my-directive>');
$compile(e)($scope);