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

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

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

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

这是某种 jQuery 之光。

设置一个指令，你需要编译一些DOM并传递一个范围。

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

$compile(e)($scope);

有没有更好的方法来通过代码创建一个指令对象？

2 个答案: