2017-5-20 AngularJS 学习笔记

控制器的作用域

• 每个控制器都对应一个模型，也就是 $scope 对象，不同层级控制器下的 $scope 产生了作用域
• 作用域的层级结构对应于 DOM 树结构
• 通过给标签添加 ng-controller 指令，就可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

根作用域 $rootScope

• 一个 angular 的应用在启动时会创建一个根作用域 $rootScope
• 这个根作用域在整个应用范围（ng-app 所在标签以内）都是可以被访问到的
• 使用 ng-init= "属性名称 = 属性值"，创建一个根作用域

作用域原则

• 1.先在当前 dom 节点所对应的作用域查找有没有 name， 如果 angular 返回 name值，则计算渲染
• 2.如果当前作用域中没有，继续去上一级父作用域中去找 name 属性，直到找到为止，如果找到 $rootScope 没有就返回空
• 3.子级可以访问父级的元素
• 4.父级不能访问子级的元素

        

                
{{name}}
                

                        
{{name}}
                
                

                        
{{name}}
                
        

自定义指令

• Angularjs 允许根据实际业务需要自定义指令，通过 angular 全局对象下的 directive 方法实现

• 自定义指令，给原生 html 标签添加新属性，属性名称自己定义，属性功能也自己定义

• 第一个参数：指令名称

• 第二个参数：回调函数，返回一个对象，这个对象就是自定义指定的相关内容

• return 对象参数

• restrict:'ECMA' 指令类型
  E:element
  A:attribute
  C:class
  M:mark (注释形式)

• template ： 指令模版

• replace ： 是否替换原有标签（bool）

• 注意：只要不用模型中的数据，可以不绑定控制器，但是用到 ng-指令 必须绑定模块

• 问题：自定义指令， restrict 属性在什么情况下使用原宿命，什么情况下使用 属性名？

• 当创建一个含有自己模版的组件的时候，建议使用原宿命，如果仅仅向为已有的元素添加功能，建议使用属性名

        
                
自定义指令内容
        
        

        

• transclude 指令, 需要在模版标签里使用 ng-transclude，代表将内容添加到模版的哪个位置

• templateUrl 指令 templateUrl:'../templateUrl.html'