angular 5

来源：互联网发布：互力微信淘客软件编辑：程序博客网时间：2024/05/01 08:31

scope
指令最大特点就是可以复用，
作用域问题：
1：所有指令默认是共享作用域的，一但一个的值改变，则所有的就改变了；
2：独立作用域scrop:true; 则每个指令都有自己的一套指令，互不影响
3：隔离作用域：除了独立作用还是不够的，不同嵌套的环境还是会影响到内部指令的值；只在
     当前标签的内部起作用；scope:{},
4: controller() :针对自定义指令内部作用数据：一般共享的数据都写到这里面
5：有差异性的数据写在scope里面；是通过绑定策略实现的：

     controller:[], //专门针对自定义指令内部的绑定方式。里面的数据都是共享的。如果不共享有变化的是通过绑定策略实现的
    @ 绑定的普通字符串，指定到底是谁变成指令如果名相同@后面就不写名称驼峰就不用再写变量名了
= 解析的变量数据看做变量名
    & 父级作用域的函数

通过自定义指令把模板生成出来
link是在自定义指令中进行dom操作的：Dom操作
link
    scope:作用域
    element：父层的元素
    attr：当前标签的属性
    reController
自定义的属性指令跟模板没有太大的关系

自定义指令嵌套：

如果按照以前的替换方式，会找不到嵌套在内部的标签

directive

transclude 默认是false 当写上这个配置的时候，就可以是用ng-translclude。把自己的标签内部的东西塞进设置的标签里面

ng-transclude

require
什么都不写是找自身

^ 父级寻找

? 也是容错的处理，即使找不到但是不报错，一般都会写上?

link：DOm操作，一般都是当前指令所对应的dom操作都写在link中，都是针对当前指令内部

controller: 一般是多调用指令的数据共享，指令和指令交互可以作为一些共有的方法，在其他指令中找到；其他指令中共享的方法跟属性

var m1 =angular.module('myapp',[]);
      m1.directive('aaa',function(){   
        return { 
          restrict:'E',
          replace: true,
          transclude : true,
          template: '<div>Hello angular!<h1 ng-transclude></h1></div>',
          controller:function($scope){ 
            this.info = {name:'anikin',age:12};
          }
        }
      });
      m1.directive('bbb',function(){ 
        return{ 
         restrict:'E',
         replace: true,
         template: '<span>Fighting Anikin!</span>',
         require: '?^aaa',
         controller: function($scope){ 
         $scope.name ='jack';
         },
         link: function(scope,element,attr,reController){
            console.log(reController.info.name);
         } 
        }
      }) 
      m1.controller('Aaa',['$scope',function($scope){      
         $scope.name = 'anikin'; 
      }]);
</script>
</head>
<body ng-controller="Aaa" >
<aaa>
  <bbb></bbb>
</aaa>

angularJs的服务

$scope

$watch

$apply

$rootScope

$timeout

$interval

$filter

$http(完成ajax操作，通过服务的方式写成的)

method

url

success

error

简写方式

jsonp

-回调函数JSON_CALLBACK

例子 : 百度下拉搜索

0 0