Angular作用域&&自定义指令

---

更多内容 ! 请移步本人博客 ! 点击跳转

---

控制器作用域

• 控制器和函数一样,也有自己的作用域.类似函数,作用域范围内先自己自身找,自己有就用自己的,自己没有的话会向上查找,找父控制器.
• 子级可以访问父级元素,父级元素不能访问子级元素
• 每个控制器(controller)都对应一个模型(Model),也就是($scope)对象,不同层级控制器下的$scope便产生了作用域.
• 模块之间是不可以嵌套使用的
• 但是控制器之间是可以嵌套使用的
• 使用ng-init 定义全局作用域。范围是整个模块。$rootScope
• 示例代码: 函数作用域

• 示例代码:控制器作用域

// 全局作用域也就是根作用域



    
{{name}}


    
{{name}}

自定义指令

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

• 示例代码 :

    

        
我是transclude1
        
我是transclude2
        
我是transclude3
        
我是transclude4
        
我是transclude5
    

• 模版命令
• 示例代码 :

// 上面的代码都一样 就是需要自定义一个html文件,然后引入 方便管理
app.directive('ele', function () {
        return {
            // E:代表元素 A:代表属性 C:当做类
            restrict: 'EA', // 以哪一种形式出现
            templateUrl: "./ele.html",
            replace: true, //是否替换原标签
            transclude: true  // 是否保留原标签的内容
        }

    });

过滤器

• AngularJs内置9个过滤器

• 过滤器的本质就是函数

• 管道符 上次的结果作为下一次的参数传递

• **示例代码 : **

{{price | currency:'¥'}}

{{dateTime | date:'yyyy-MM-dd hh:mm:ss'}}

{{course | filter:'j'}}

{{course | limitTo:-2}}

{{name | uppercase | lowercase}}

{{numStr | number:4}}

{{scores | orderBy:'':false}}
{{scores | orderBy:'score':true}}

{{stus}}

{{stus | json}}

自定义过滤器

• AngularJs内置过滤器外,还可以根据业务需要自定义过滤器

• 通过模块对象实例提供的filter方法自定义过滤器

• **示例代码 : **

{{price | eFilter:'eFilter'}}

{{name | eeUppercase}}
{{price | eeCurrent : '&'}}

依赖注入

• AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用这导致了使用者和被使用者之间存在依赖关系。
• 所谓依赖注入是指在运行时自动查找依赖关系
• 然后将查找到依赖传递给使用者的一种机制。

依赖注入为分两种:

• 行内式注入
  以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数
  推荐使用行内式注入.

• 推断式注入
  没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
  这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

• **示例代码 : **

{{name}}

$location服务

• 服务就angular内置的功能

• 它的本质就是一个对象或函数

• $location是对原生Javascript中location对象属性和方法的封装。

• **示例代码 : **

{{name}}
{{absUrl}}
{{hostName}}
{{url}}
{{search}}

定时器服务

• $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

• **示例代码 : **

{{name}}
{{timeDate | date:'yyyy-MM-dd hh:mm:ss'}}