javascript - 无法在 AngularJS 服务中检索缓存的 jQuery 选择器

Question

我在隐藏元素时遇到了一些麻烦。我正在尝试使用 AngularJS 服务隐藏此元素。我的代码如下:

app.service('testService', function(){
    var testElement = $("#testElement");

    this.hideElement = function(){
        testElement.hide();
    }
});

上面的代码实际上并没有隐藏该元素，但下面的代码却隐藏了:

app.service('testService', function(){
    this.hideElement = function(){
        var testElement = $("#testElement");
        testElement.hide();
    }
});

但是，我有多个使用 testElement 的函数，并且我不想在服务中需要 testElement 的所有函数中继续声明它。我在这里做错了什么吗？

Answer 1

Am I doing something wrong here?

是的。事实上，你的第一步就错了。我的意思是拥有进行一些 DOM 操作的服务，在您的例子中隐藏 HTML 节点。服务是数据操作层(检索、转换、保存、发布等)，但绝不是表示层，它不应该关心 View 。服务是可重用的应用程序代码片段，这意味着它应该被注入(inject)到应用程序的不同位置以提供到数据源的桥梁，它不应该进行任何 View 转换，这不是它们的用途。

您应该使用指令并以 Controller 作为中介来决定何时以及隐藏和显示什么。最有可能的是，使用内置 ngShow/ngHide 指令并在 Controller 中设置一些 bool 标志就足够了。