Skip to content

angularjs笔记

Jump to bottom
jiang2016tao edited this page Dec 25, 2017 · 2 revisions
  1. 指令
指令基础知识详解参考：http://www.jb51.net/article/83051.htm link:function link(scope, iElement, iAttrs, controller) { ... } 链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的，它也是大部分指令逻辑代码编写的地方。 scope - 指令需要监听的作用域。 iElement - instance element - 指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的，因为那时它们才已经全部链接好。 iAttrs - instance attributes - 实例属性，一个标准化的、所有声明在当前元素上的属性列表，这些属性在所有链接函数间是共享的。 controller - 控制器实例，也就是当前指令通过require请求的指令direct2内部的controller。比如：direct2指令中的controller:function() 



{this.addStrength = function(){}}，那么，在当前指令的link函数中，你就可以通过controller.addStrength进行调用了。  
Pre-linking function 在子元素被链接前执行。不能用来进行DOM的变形，以防链接函数找不到正确的元素来链接。  
Post-linking function 所有元素都被链接后执行    




ng-bind-html和ng-bind从字面意就可以看出来，前者可以针对html的字符串，让浏览器解析，而后者只能是字符串，浏览器是直接显示的。  
还有往往下拉框显示，需要对象的多个属性值的组合，使用例子如下：  


<ui-select-choices repeat="subSystem in subSystems | propsFilter:{subSystemName:$select.search,subSystemId:$select.search}">
         <div ng-bind-html="subSystem.subSystemName+'('+subSystem.subSystemId+')'|highlight:$select.search"style="display:inline-block;"></div>
</ui-select-choices>    
```  
ui-select的使用可以参考：https://github.com/angular-ui/ui-select/wiki/ui-select  
例如：我不想出现搜索框的，可以在标签里加search-enabled="false"。示例代码：  
```html
<ui-select ng-model="sort.selected" theme="select2" search-enabled="false" on-select="selectSort()">
                        <ui-select-match placeholder="请选择">
                            {{sort.selected.name}}
                            <i class="glyphicon glyphicon-menu-down wing"></i>
                        </ui-select-match>

                        <ui-select-choices repeat="sortItem in sortList">
                            {{sortItem.name}}
                        </ui-select-choices>
                    </ui-select>





    1. angularjs的$on、$emit、$broadcast  

如何在作用域之间通信呢？  





1.创建一个单例服务，然后通过这个服务处理所有子作用域的通信。  


2.通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。  



$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。  
$emit：子传父  传递event与data  
$broadcast：父传子 child controller传递event与data  
$on：监听或接收数据。。用于接收event与data  
$broadcast、$emit事件必须依靠其他事件（ng-click等）进行触发，而不能单纯写一个这个。  
$on倒是可以直接写，因为它属于监听和接收数据的。  
$on的方法中的event事件参数：  


    event.name 事件名称  
    event.targetScope  发出或者传播原始事件的作用域  
    event.currentScope 目前正在处理的事件的作用域  
    event.stopPropagation()    一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)  
    event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。  
    event.defaultPrevented 如果调用了`preventDefault`则为true  





    1. 
ng-init  

这个是可以在任意标签声明变量赋值的，但是为什么我声明一个对象数组，就是不会显示，郁闷。代码如下：   


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <h1 ng-init="myText='Hello World222!'">{{myText}}</h1>

    <p> ng-init 指令创建了 AngularJS 变量，你可以在应用中使用它。</p>

    <div ng-init="sortList=[{name:‘首次告警时间’,value:0},{name:‘最近告警时间’,value:1},{name:‘告警级别’,value:2}]">
        <select>
            <option ng-repeat="item in sortList" value="item.value">item.name</option>
        </select>
    </div>
</div>
</body>
</html>
```  
<code>
  这里是对象数组的声明中英文符号的问题引起的。  
</code>  
  
## ng-repeat  
指令用于循环输出指定次数的 HTML 元素。注意是带html标签的。  
参考：http://www.runoob.com/angularjs/ng-ng-repeat.html  
里面还有一些特殊属性：  
```html
$index
$first
$last
$middle
even
odd


个人认为应该与repeat有所区别，上面的例子里有使用repeat的。  


    1. ng-repeat-start和ng-repeat-end使用  

参考：https://www.cnblogs.com/BGOnline/p/5980751.html  


    1. ng-class  

三种使用方法：  
1、通过$scope绑定（不推荐）  
2、通过对象数组绑定  
3、通过key/value键值对绑定  
参考：http://blog.csdn.net/jumtre/article/details/50802136  


  1. angularjs过滤器  

基础知识，参考http://www.runoob.com/angularjs/angularjs-filters.html  
实例代码：  
```html
<ui-select ng-model="selectSubSystem.selected" theme="select2" on-select="selectSubSystem()">
                    &lt;ui&#45;select&#45;match placeholder=&quot;选择子系统&quot;&gt;
                        ()
                        &lt;i class=&quot;glyphicon glyphicon&#45;menu&#45;down wing&quot;&gt;&lt;/i&gt;
                    &lt;/ui&#45;select&#45;match&gt;
                    &lt;ui&#45;select&#45;choices repeat=&quot;subSystem in subSystems &#124; propsFilter: &#123;subSystemName: $select.search,subSystemId:$select.search&#125;&quot;&gt;
                        &lt;div style=&quot;display:inline&#45;block;&quot;&gt;&lt;/div&gt;
                    &lt;/ui&#45;select&#45;choices&gt;
                </ui-select>  
```  
```js  
.filter('propsFilter', function () {


    //过滤
    return function (items, props) {
        var out = [];






        if (angular.isArray(items)) {
            items.forEach(function (item) {
                var itemMatches = false;
                var keys = Object.keys(props);
                for (var i = 0; i < keys.length; i++) {
                    var prop = keys[i];
                    var text = props[prop].toLowerCase();
                    if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                        itemMatches = true;
                        break;
                    }
                }
                if (itemMatches) {
                    out.push(item);
                }
            });
        } else {
            out = items;
        }






        return out;
    };  




```  
这里我知道propsFilter: {subSystemName: $select.search,subSystemId:$select.search}后面是跟的过滤的条件，但是item需要过滤的集合是如何传入的呢？$select.search是绑定搜索输入框的。  
点击事件传送当前被点击的对象：  
```html  


```  
可以通过$($event.target).closest('div')这样来获取节点
              


          



  
          

            


            
Clone this wiki locally