关于“弹出框居中、angular mouse事件、JS类切换”的那些事

今天就只总结了四个问题哦，详情如下：

1.angular的鼠标事件：由于之前一直只用到ng-click，所以居然除了ng-click之外的angular事件都不甚清楚，今天有了鼠标悬停事件的需求，所以就百度了下angular的鼠标事件。

①.ng-mousedown、②.ng-mouseup、③.ng-mouseenter、④.ng-mouseleave、⑤.ng-mouseover

2.angular中的一次性数据绑定：angular是mvvm型的JS框架，我自己理解的就是model to view，view to model，即模型层和试图层之间的数据绑定。其中ng-model-双向数据绑定，ng-bind-单向数据绑定。使用ng-bind绑定 后，改变模型层相应数据后立即会反应到视图层。但如果只是想一次性绑定数据，之后不在反应到视图层的话可以使用{{::param}},即使用插值法且在变量前加两个冒号。值得主要的是这种方法要求angular版本为1.3及以上。

3.使用js实现一组兄弟节点中类的切换（这组兄弟节点中永远只有一个节点拥有某个特定的类）：在这之前要了解的是：querySelector（）：可以通过css选择器获取元素节点；

classList属性：元素的classList属性即包含了元素的所有类。element.classList的属性有length-元素拥有类的个数，方法：item(index)-index位置的类名，add('className')-为元素添加一个类，remove（‘className’）-为元素移除一个类，toggle('className')-切换类，contains（‘className’）-元素是否包含该类，当要重写元素的所有类时使用className属性。前面提的问题是什么来着，看答案哦：

js代码： scope.chooseProperty = function(event,index){
                                                   
                                                   event.currentTarget.parentNode.querySelector('.tab-selected').classList.remove('tab-selected');  //选中拥有该类的节点并移除
                                                   event.currentTarget.classList.add('tab-selected');                       //为当前节点添加类
                                              }

html代码：<span ng-repeat="item in value" ng-bind="item" class="property-box " ng-click="chooseProperty($event,$index)" ng-class="$index==0 ? 'tab-selected':''"></span>

页面效果：

4.关于弹窗窗口页面居中：css代码段-

div.viewer  {

1. width: 600px;
2. height: 600px;
3. position: absolute;
4. margin-left: -300px;
5. margin-top: -300px;
6. z-index: 333;
7. background: black;
8. top: 50%;
9. left: 50%;

}

页面效果：

今天就是这些了...