AngularJS 笔记

自定义指令 scope 的属性参数 &

var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function($scope){
        $scope.name = 'father-name';
        $scope.fatherAge = 'father-age';
        $scope.fatherMethod = function(){
              alert('执行了父方法 fatherMethod');
        }
}]);
app.directive('gxq',function(){
        return {
                restrict:'EA';
                template:'
{{name}}
点我
'，
                conteroller:function($scope){
                        
                },
                scope:{
                        name:'@',
                        age:'=',
                        //要求外界传递信息（父方法进来）
                        show:'&'
                }
        }
});

        
        
{{name}}
        
        
{{fatherAge}}
        

        

自定义指令中的 Link 属性

  app.directive('gxq',function () {
           return {
               restrict:'EA',
               template:'
hello
 
点我
',
               replace:true,
               controller:function ($scope) { //一般都是处理业务逻辑

               },
               link:function ($scope,ele,attr) { //一般都是处理dom元素。
                   var res = attr.xmgShow;
                   if (res == 'false'){
                       ele.css({
                           'display':'none'
                       });
                   }
               },
               //scope:true //与父作用域是同一个
               scope:{
                   show:'&',   //1.show="父方法名称（）"
                   hello:'&'
               }
           }

        });


    


父点击

jQLite 对象

• AngularJS 中包含了一部分 jQuery 功能
• 如果说已经引入了 jquery 那么使用 angular.element(box);获取的对象就是一个原生 jquery 对象
• 要想使用 jquery 的全部方法需要先引用 jquery 文件 然后引用 angularjs 文件

var box = document.querySelector('.box');
var btn = document.querySelector('.btn');
box = angular.element(box);
btn = angular.element(btn);
box.css({
    width:'100px',
    height:'100px',
    background:'red'
})
//无效果，angular内封装的 jquery 没有这个方法
btn.on('click',function(){
    box.animate({
            width:'300px',
            height:'300px'
    })
})

$watch 监听

    
    





{{per.name}}
{{per.age}}

$q 可以理解为 条件执行

      //1.创建模板
        var app = angular.module('app', []);
        //2.创建控制器
        app.controller('xmgController', ['$scope','$http','$q', function ($scope,$http,$q) {

            var defer = $q.defer();

            $http({
                url:'url',
                method:'get',
            }).then(function (res) {
                defer.resolve(res);
            }).catch(function (error) {
                defer.reject(error);
            });

            defer.promise.then(function (res) {
                //resolve
                alert(res);
            },function (error) {
                //reject
                alert('error'+error);
            }).finally(function () {
                //finally一定会执行。
                alert('fin');
            });


        }]);