angular指令及广播

angular指令

1.指令：directive(类似于bootstrap中组件的功能)

描述：angularJS框架中提出了一种用来解决【大量重复冗余的页面编辑代码】的问题技巧，即为指令。

2.语法：

描述：在angular指令内部，所有的指令都是通过数据模型.directive()创建的

        app.directive(‘指令名称’,function(){

            return{

            restrict:'指令类型'，

            template/templateUrl:'指令结构|指令模板|指令内容'

            replace:'true|false' 指令复写；

           }

    });

说明：

1）指令类型：restrict

描述：指令类型是指令可以在页面中通过任何形式呈现

    类型：指令共计有四种类型：“A”“E”"C"“M”

a."A”：attribute,指令通过属性方式呈现

 b .“E”element ，指令通过元素方式创建

c. "C"class ，指令通过类名创建

d.“M”comment,指令通过注释创建

注意：

a.指令名称必须采用小写，大写无效

b.指令如果是M类型，则必须采用replace ：true才能显示

c.指令如果通过template加载则有且仅有一个根节点

2）指令结构template

描述：指令结构template值得是指令在页面中显示成什么样子

类型：指令结构中共有两种加载方式，分别为特莫拉特和templateUrl两种

说明：

    a.template：一=意味着指令结构中，需要直接以字符串结构形式编写HTML代码

    b.templateUrl:意味着指令结构中，需要引入HTML中的url地址

3）指令复写replace

描述：指令指的false指令在页面中是否会被当成一个子元素，但comment会失效，插入到调用本指令的元素内部

类型：布尔值类型，默认是false表示会作为子元素

说明：当指令结构式templateUrl是，replace参数不应该被写出，否则指令无法加载

3.指令方案link

描述：指令方案link是angularJS框架中提供给指令的一种“专有行为”

    这就好比bootstrap中下拉菜单的点击效果一样

    这些方案不需要开发者在外部处理结束交互方案，而是让指令直接自动拥有行为，指令方案link正式为指令添加这些行为的手段

语法：app.directive('指令名称',function(){

        link:function(scope,element,attrs{})

        })

说明：（1）scope:如果将整个指令看做是一个控制器，那么scope就相当于$scope

    因为本质是形参，所以写什么都可以

            2）element：一个包含了指令中，左右HTML元素的数组，没一个数组都是dom对象，数组整体支持jq操作，可以批量处理，dom对象本身支持原生操作。

            3）attrs：当前指令的属性对象，指的是当前指令的属性，而不是指令内部所有元素的属性，本属性可读可写，打你半只用来读取，读取采用attrs.$get,设置使用attr.$set

注意：

对于指令方案link中的scope，如果不在指令中进行初始化操作:scope:{}

那么scope就相当于mainController中的$scope，即这个$scope

能够访问到全局所有的angular变量

4.广播broadCast

描述：controller之间的数据交互尽管可以使用service服务进行实现，但是若希望‘异步监听功能，单独依靠服务是无法实现的

于是为了解决这个问题，angularJS框架提出了一种称为broadCast广播，提供了一种可能实现异步监听，以此完成controller之间的交互

前提：angular框架中的广播技巧，是用来处理具有父子关系的controller的数据

类型：anjularJS有两种表现形式，分别为broadCast（父级对子集广播）和emit（子集对父级广播）

语法：

发送广播：$scope.$broadcast|$emit（’广播频段或广播代号’，广播内容）’

监听广播：$scope.$on('广播频段或广播代号'，function（事件对象，接收到的广播内容）)