Question

这个问题更具理论性而非实际性，但我不得不问这个问题是因为朋友遇到了类似的问题，我无法为他回答这个问题。

我有一个模态窗口，我使用我从AngularJS ui-bootstrap扩展$modal对象。现在，当我打开一个模态时，我想检查一个类是否存在于DOM中（没有真正的原因，但我想知道它是否存在）。该类在我使用$ modal创建的服务中确定（请参阅options对象）。当我尝试使用document.querySelectorAll('.photo-modal').length;找到该类时，我返回零但是当使用Chrome开发工具并且应用该类时，我可以在DOM中看到该类。我的朋友问题很相似，但他们最初可以找到该类，但在关闭Modal窗口后，它们将返回null或零值。看看这个例子。我打开一个模态窗口并设置一个'window-class'属性。该类在那里，但JavaScript无法找到它。我尝试使用$timeout，一个DOM遍历函数，但没有任何东西返回DOM中我的类的存在。看看这个例子并注意控制台。

angular.module('modalStuff', ['ui.bootstrap'])

.controller('MainCtrl', ['$scope', 'ModalService', function ($scope, ModalService) {

   $scope.openModal = function () {
	  ModalService.profilePic();
   };
}])

.factory('ModalService', ['$modal', function ($modal) {

var modal = angular.copy($modal);

   modal.profilePic = function ( ) {

   var options = {
      template:'<div silly-directive>Content of the template.</div>',
	  windowClass: 'photo-modal'
   };

   return modal.open(options);
};
			
   return modal;
			
}])

.directive('sillyDirective', [function () {
  
  var findUpDom = function (elem, cssClassName) {

				if (elem.classList.contains(cssClassName)) {
					return elem;
				} else {
					while (elem.parentNode) {
						elem = elem.parentNode;
						if (elem && elem.classList.contains(cssClassName)) {
							return true;
						}
					}
					return false;
				}

			};
  
   
  return { 
    link: function (scope, element) {
     
      var myClass= document.querySelectorAll('.my-class').length;
      var modalClass= document.querySelectorAll('.photo-modal').length;     
      
      console.log(myClass, modalClass);      
      //console.log(findUpDom(element[0],'photo-modal')); // Returns an error as undefined
    }
  
  };
   
}]
);

body {
  font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: aliceblue;
}

.photo-modal {
  background-color: blue;
}

.my-class {
  background-color: lightBlue;
  padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<title>JS Bin</title>
</head>

<body data-ng-app="modalStuff" data-ng-controller="MainCtrl">
  <div class="my-class">
    <button data-ng-click="openModal()">Open Me</button>
  </div>
</body>

现在有人可以向我解释为什么无法找到css类吗？我在JSBin中也有这个例子：https://jsbin.com/nuxipo/edit?html,css,js,console,output

为什么我在使用ui-bootstrap $ modal时无法在DOM中找到类？

0 个答案: