当前位置 : 主页 > 网络编程 > JavaScript >

Angular_Function.Txt

来源:互联网 收集:自由互联 发布时间:2021-06-30
Angular_Function.Txt 1、angular的$watch函数 /** $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){ret
Angular_Function.Txt
1、angular的$watch函数
    /**
    $watch(watchExpression, listener, objectEquality);
    每个参数的说明如下:
    watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
    listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)
    objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化.
                    如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它,设置值为true */
	var timeout;
	var watch = $scope.$watch('subData.searchPrefix', function(newVal, oldVal) {
	  if(newVal != oldVal) {
	   //如果开启默认搜索,把if判断去掉
	   if(timeout) {
	      $timeout.cancel(timeout);
	    }
	    timeout = $timeout(function() {
	    	//请求服务器代码
	    	console.log($scope.subData.searchPrefix)
	    }, 800);
	  }
	});

    //$watch函数返回一个注销监听的函数,如果我们想监控一个属性,然后在稍后注销它
    //watch();注销$watch的事件监听
    //$watchGroup(watchExpressions, listener);$watchCollection(obj, listener);//相关的函数

2、$timeout(fn,[delay],[invokeApply])
    fn:一个将被延迟执行的函数
    delay:延迟的时间(毫秒)
    invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply

    方法:$timeout.cancel(promise); 
    promise:$timeout函数的返回值,清除上次$itmeout返回的promise

3、$interval(fn,delay,[count],[invokeApply],[Pass])
    fn:一个将被反复执行的函数
    delay:每次调用的间隔毫秒数值
    count:循环次数的数值,如果没设置,则无限制循环
    invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply
    Pass:函数的附加参数
    // 定时器 定时刷新数据
    var timer = $interval(
    function() {
        hello();//自己定义的每次需要执行的函数,也可以写一些其他的内容
    },
    5000
    );
    //当DOM元素从页面中被移除时,AngularJS将会在scope中触发$destory事件。
    //这让我们可以有机会来cancel任何潜在的定时器。切换controller、页面后即可调用
    $scope.$on(
    "$destroy",
    function() {
        $interval.cancel( timer );
    }
    );

4、$http函数:
    var http = $http({
        method  : 'GET',
        url     : 'url',
        timeout : 100000,
        data:data,//放到POST数据里面
        params:data,//拼接到URL链接上
        headers : {'Content-Type': 'application/x-www-form-urlencoded'}
    });

    http.then(sucessFun,errorFun,...);

5、angular.forEach()函数:
    angular.forEach(redis.subdomain.split(","), function(data,index,array){
            strTmp += data.substr(1);
            if(index+1
 
  
    //
   //循环项 
    $scope.changeAll = function(){//全选-取消全选 
        angular.forEach($scope.pageConf.rows,function(v,k){
            v.isSelected = $scope.selectAll;  
        })  
    }  
    $scope.childChange = function(){//选中一个时
        var select = true;
        $scope.selectAll = true;
        angular.forEach($scope.pageConf.rows,function(v,k){
            v.isSelected || ($scope.selectAll = false);
        });
    }

6、Json和字符串--formJson--toJson
    // 字符串和对象的转化  
    //JSON.parse(); js 方法  
    var jsonStr = '{"name":"李四"}';  
    console.log(angular.fromJson(jsonStr));  
        
    // 对象转字符串  
    //JSON.stringify() js方法  
    console.log(angular.toJson(obj7));

7、常用全局函数
    angular.isArray()	    如果引用的是数组返回 true
    angular.isFunction()	如果引用的是函数返回 true
    angular.isUndefined()	如果引用的未定义返回 true
    angular.equals()	    如果两个对象相等返回 true
    angular.isString()	    如果引用的是字符串返回 true
    angular.copy()	        数组或对象深度拷贝
    angular.forEach()	    对象或数组的迭代函数
    angular.lowercase()	    将字符串转换为小写
    angular.uppercase()	    将字符串转换为大写
    angular.bootstrap()	    手动启动 AngularJS
    angular.element()	    包裹着一部分DOM element或者是HTML字符串,把它作为一个jQuery元素来处理
    //不需要引入jQuery就可以用
    angular.element(document).find('body').append('Hello Angular and jqLite');
    angular.element($event.toElement).parent().find('input').val()
    //必须先导入jQuery才能使用
    angular.element('body').append('Hello Angular and jQuery');

8、事件的的判断:
    ng-keypress="$event.which==13 && serchList()"#回车
    $event.stopPropagation();#阻止事件冒泡
   
9、跳转到页面指定的锚点:
    //
  
    //$scope.gotoElement('modal_head');
    $scope.gotoElement = function (eleId) {
        $location.hash(eleId);
        $anchorScroll();
    }

10、获取当前url路径(当前url#后面的内容,包括参数和哈希值)
    var url = $location.url();
    var absurl = $location.absUrl();//获取当前完整的url路径

11、表单验证(ng-form---name---mailPlusForm---novalidate):
    
  
    
   
     收件人不能为空 
     收件人邮箱格式不正确 
  

    JS检验表单是否通过验证:
    $scope.verify = true;  
    if (!$scope.mailPlusForm.$dirty || !$scope.mailPlusForm.$valid){
        $scope.alertCtrl = {msg:'表单数据未通过验证,请检查!',type:4};
        return;
    }

12、Angular的异步协同问题:
    1、注入$q
    2、编写方法
    var searchPrefix = function (view) {
            var deferred=$q.defer();
            var promise=deferred.promise;
            sfHttp.fromGet({
                url:sfHttp.getRemotePath()+'/dnsSelf/domain/search',
                data:{domainName:view,fitter:$scope.basisData.suffix},
                success:function (data) {
                    deferred.resolve(data);//执行成功
                },
                error:function (err) {
                    $scope.alertCtrl = {msg:'从服务端搜索域名前缀失败!',type:4};
                    deferred.reject();//执行失败
                }
            });
            return promise.then(function (data) {
                return data.result;
            });
        }
    /*注释*/
    在Angularjs使用Promise的时候需要用到内置服务$q
    Deferred定义工作单元#var deferred=$q.defer()
    用来定义工作单元的开始,处理和结束三部分;
    属性:
        resolve(value):用来执行deferred promise,value可以为字符串,对象等
        reject(value):用来拒绝deferred promise,value可以为字符串,对象等
        notify(value):获取deferred promise的执行状态,然后使用这个函数来传递它

    Promise接收Deferred返回的数据#var promise= deferred.promise;
    有状态和句柄,即成功失败,以及返回的数据;
    属性:
        then(successFunc, errorFunc,notifyFunc):无论promise是成功了还是失败了,当结果可用之后,then都会立刻异步调用
        catch(errorFunc)
        finally(callback)
 
网友评论