Question

我一直在尝试使用this blog上的代码来访问描述浏览器大小的值，该值将在AngularJS中使用。我希望能够这样做，这样我就可以根据屏幕大小设置路由状态（我正在使用ui-router）。

该指令的这一部分检索已在index.html文件中添加的<span>个元素。每个<span>元素都有一个描述浏览器大小的类（在我的例子中为'small','medium','large'）。使用CSS，媒体查询用于根据浏览器窗口的大小设置'display:none'元素的<span>。因此，如果浏览器的大小小于320px，则.medium和.large类都将具有display:none。指令应检查这些元素的显示值，并找出它们中没有的元素，从而返回活动类的名称。

link: function(scope, elem, attrs) {
       var markers = elem.find('span');
       function isVisible(element) {
           return element
           && element.style.display != 'none'
           && element.offsetWidth
           && element.offsetHeight;
       }

       function update() {
           angular.forEach(markers, function (element) {
           if (isVisible(element)) {
               scope.dnDisplayMode = element.className;
               return false;
           }
       });
   }

   var t;
   angular.element($window).bind('resize', function() {
       clearTimeout(t);
       t = setTimeout(function() {
           update();
           scope.$apply();
       }, 300);
   });

   update();

}

我遇到的问题是函数isVisible。对于每个元素，element.style.display的值为'null'。我使用过Firefox和Chrome的元素检查器，发现这些元素的值为'display:inline-block'或'display:none'。但AngularJS使用其嵌入式jQuery从元素中检索值。为此，它将转到元素的样式并尝试查找显示值。但是在所有选定元素的style属性中，该样式的所有值都是空的。

有什么想法吗？

Answer 1

你的'elem'变量是一个jqLite对象，要访问本机dom属性，比如style.display，你需要在你的isVisible函数中使用element [0] .style.display。

无法在AngularJS指令中检索CSS值

1 个答案: