AngularJS指令或服务

AngularJS Directive or Service?

本文关键字:服务 指令 AngularJS      更新时间:2023-09-26

我目前对AngularJS的理解告诉我,指令应该只包含DOM操纵服务所有与逻辑和数据处理有关的内容。

在我的情况下,我不确定使用哪个。我得到了一个Object,它包含三个函数:

// Creates a documentFragment & normal element.
// Returns the fragment.
createElem: function(htmlStr) {
    var frag = document.createDocumentFragment(),
    temp = document.createElement("div");
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
},
// Removes all created childNodes.
deleteElem: function(htmlStr) {
    while (htmlStr.firstChild) {
        htmlStr.removeChild(htmlStr.firstChild);
    }
},
// Redirects to page.
openGate: function(keyStr) {
    var open = function() {
        $location.path("/" + keyStr).replace();
        $rootScope.$apply();
    };
    setTimeout(open, 500);
}

我想通过我的AngularJS应用程序访问它们。

但是我不确定我是否应该使它成为一个服务或指令。

违反指令的理由

所有这些

(好吧,可能是三个中的两个)都不是直接操纵或更改DOM。即使我创建和删除元素,也必须在其他地方应用,如控制器中的elem.insertBefore( createElem("<div></div>") );openGate();函数只是更改位置,与DOM完全无关。

拒绝服务的原因

我没有真正处理任何数据。在createElem();中,我创建了一个documentFragment,这是一个没有父节点的节点。所以如果我调用这个函数,在我把它插入到某个地方之前,DOM内什么也不会发生。


也许我应该把它们分成指令服务?否则,它们将始终停留在相同的上下文中。

你把函数分成指令和服务是正确的。

服务不仅仅用于逻辑处理。服务的主要目的是包含打算在站点的其他部分(如控制器和指令)之间共享的信息。你可以这样想:

我要操纵DOM吗?使用指令。

我要在我的网站的各个组件之间共享这些信息吗?使用服务(即服务、工厂或提供者)。