Skip to content

angularjs笔记

Jump to bottom
jiang2016tao edited this page Feb 27, 2018 · 53 revisions

module

参考：https://www.cnblogs.com/jcomet/p/4350304.html
在项目中一些指令是需要共用的，我们可以使用一个专门的模块来编写这些指令，然后在需要的模块里引用即可。

指令

指令基础知识详解参考：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>

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.在定义指令。

app.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished')
                })
            }
        }
    }
});

        2.在页面上使用指令。

on-finish-render="ngRepeatFinished"

        3.在控制器中监听。

  $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
            getUserName(-10);
        });

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')这样来获取节点

angularjs异常信息

angular.min-1.4.5.js:107 Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.5/$rootScope/inprog?p0=%24digest

使用$scope.$apply()提交变量更改，AngularJS报如上错误信息时，代表angular说它已经在处理脏数据了，你别老催他。实际上是起冲突了，使用$scope.$applyAsync()或去掉$scope.$apply()就OK了。

Clone this wiki locally