AngularJS - 在指令内获取body元素

Question

如何在Angular指令中获取body元素？我的目标是在指令内部执行类似于jQuery $('body').innerWidth();的操作。我不想使用jQuery，而是使用Angular内置的jqlite实现。

- bsr

---

我想要访问body标签以更改类名，但Angular有应该使用的绑定 - 只是对于我来说，作用域从我的嵌套指令（模态框）中不存在。这个模态框有一个要插入到body标签中的类，你可以理解它如何帮助。我更喜欢在指令中使用逻辑绑定...但是从指令中，我怎么能访问正确的作用域呢？我在这里发表的不是答案，而是围绕这个问题的一些想法。 - landed

Answer 1

如果您需要从应用于另一个元素的指令中访问body元素，可以使用$document服务，如下所示。

app.directive("myDirective", function($document) {
  return function(scope, element, attr) {
    var bodyWidth = $document[0].body.clientWidth;
    console.log("width of body is "+ bodyWidth);
  };
});

<button my-directive>Sample Button</button>

你也可以使用jqLite提供的DOM遍历方法（虽然它们比jQuery提供的要弱得多）。例如，您可以使用angular.element.parent()方法进行递归查找来查找body标签。

- jessegavin

---

抱歉，我应该提到。我的指令深入到body标签内部。是否有可能访问body，即使它在树的上方（不是元素的子级）？ - bsr

所以，在你的例子中，是否可以在应用了TABLE上的dir后获取body的宽度？ - bsr

谢谢，我接受了。如果您不介意，能否展示如何从子元素获取一个带有id #container的div的大小。再次感谢您的所有帮助。 - bsr

根据下面的讨论，看起来这是不可能的。感谢您的努力和时间。 - bsr

您是否因带宽原因避免使用jQuery？如果您不需要支持旧版IE，可以使用zepto.js库（文件大小更小且支持完整的jQuery API）。http://zeptojs.com/ - jessegavin

Answer 2

使用包含在Angular的jQLite中的find()实现的另一种变体：

app.directive("myDirective", function() {
    return function(scope, element, attr) {

    var body = angular.element(document).find('body');
    console.log(body[0].offsetWidth);

    };
});

- rGil

---

如果您查看$SnifferProvider下的Angular代码，您会看到对document.body的引用，其中document只是document = $document[0] || {}。 - Izhaki