一、DI-控制器参数


$scope

  - 在js和html之间传递数据

  - 仅在控制器作用域内有效


$element

  - 是一个jQuery对象

  - 作用域控制器所在的html元素

  - 在js中,通过$element获取DOM对象

      - var e = $element.children().eq(0);

      - $scope.w = e.width();

      - $scope.h = e.height();


$http

  - http协议请求

      - $http.get(url).success(function(result){});


二、DI-监听


$watch

  - 监听变化

  - 语法

      - $scope.$watch('w',function(to,from){

           e.width(to);

        });

      - $scope.$watch('h',function(to,from){

           e.height(to);

        });

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第1张图片

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第2张图片


三、指令-模板包含


ng-include

  - 直接引用外部文件

      -

      -

  - 配合变量引入文件

     

         

     



四、指令-节点控制


ng-style

  - 直接指定样式

    

  - 通过控制器定义样式变量

    


ng-class

  - 直接指定类

    

  - ng-class-even 和 ng-class-odd

   

           

  • ` m `
  •    


显示和隐藏

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第3张图片


其他属性

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第4张图片

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第5张图片


五、事件绑定


文本变化

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第6张图片


鼠标点击

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第7张图片


鼠标移动

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定_第8张图片


总结:本章内容主要介绍了 AngularJS DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定