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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS之基础-4 DI(控制器参数监听)指令(模板包含节点控制)事件绑定相关的知识,希望对你有一定的参考价值。

一、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);

        });

技术分享

技术分享


三、指令-模板包含


ng-include

  - 直接引用外部文件

      - <div ng-include src="tpl.html"></div>

      - <div ng-include="tpl.html"></div>

  - 配合变量引入文件

      <section data-ng-app="" data-ng-init="url=‘contact.html‘">

          <div data-ng-include="url"></div>

      </section>



四、指令-节点控制


ng-style

  - 直接指定样式

    <div ng-style="{width:100 + ‘px‘,height:100 + ‘px‘, backgroundColor:‘red‘}"></div>

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

    <script>

         function myCtrl($scope,$element){

             $scope.style = {width:100 + ‘px‘,height:100 + ‘px‘,backgroundColor:‘blue‘};

         }

    </script>


ng-class

  - 直接指定类

    <div ng-controller="TestCtrl" ng-class="‘cls‘"></div>

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

    <ul ng-init="l=[1,2,3,4]">

        <li ng-clas-odd="‘odd‘" ng-class-even="‘even‘" ng-repeat="m in l">{{ m }}</li>

    </ul>


显示和隐藏

技术分享


其他属性

技术分享

技术分享


五、事件绑定


文本变化

技术分享


鼠标点击

技术分享


鼠标移动

技术分享


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


本文出自 “会飞的蚂蚁” 博客,谢绝转载!

以上是关于AngularJS之基础-4 DI(控制器参数监听)指令(模板包含节点控制)事件绑定的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS之基础-3 控制器(基本语法)模块(使用模块注册控制器)

angularJS之$watch的一个小介绍

angularJs之$watch监听属性变化访问后台

AngularJS基础概要整理(下)

实战之AngularJS 的Scope和Service的深入应用心得

AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href