Skip to content

angularjs笔记

Jump to bottom
jiang2016tao edited this page Dec 22, 2017 · 53 revisions

指令

指令基础知识详解参考：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"。示例代码：

<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>

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>
这里是对象数组的声明中英文符号的问题引起的。

ng-repeat

指令用于循环输出指定次数的 HTML 元素。注意是带html标签的。
参考：http://www.runoob.com/angularjs/ng-ng-repeat.html
里面还有一些特殊属性：

$index
$first
$last
$middle
even
odd

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

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

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

ng-class

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

angularjs过滤器

基础知识，参考http://www.runoob.com/angularjs/angularjs-filters.html
实例代码：

<ui-select ng-model="selectSubSystem.selected" theme="select2" on-select="selectSubSystem()">
                    <ui-select-match placeholder="选择子系统">
                        {{selectSubSystem.selected.subSystemName}}({{selectSubSystem.selected.subSystemId}})
                        <i class="glyphicon glyphicon-menu-down wing"></i>
                    </ui-select-match>
                    <ui-select-choices repeat="subSystem in subSystems | propsFilter: {subSystemName: $select.search,subSystemId:$select.search}">
                        <div ng-bind-html="subSystem.subSystemName+'(' + subSystem.subSystemId + ')'"
                             style="display:inline-block;"></div>
                    </ui-select-choices>
                </ui-select>  
.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是绑定搜索输入框的。
点击事件传送当前被点击的对象：

<div ng-click="showHide($event,$index)" showClick>

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

Clone this wiki locally