码迷,mamicode.com
首页 > 其他好文 > 详细

angular学习笔记(十九)

时间:2014-05-28 20:16:56      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:style   c   class   blog   code   java   

本篇主要介绍angular使用指令修改DOM:

使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用.

与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令:

var someModule = angular.module(‘SomeModule‘,[]);

someModule.directive(‘directiveName‘,function(){

     return {

         link: function(scope,elements,attrs,controller){

         }

     }

});

directive传入两个参数:

第一个参数是指令的名字;

第二个参数是一个工厂函数:

函数返回一个对象,对象的link方法的函数有四个参数:

scope:获取外层scope的引用

elements:它所存在的DOM元素

attrs:传递给指令的一个属性数组

controller:DOM元素上的控制器

 

下面来看个简单的小例子,在html5中,元素有autofocus属性,添加了这个属性的元素,会自动获取焦点.我们可以使用angular来写一个这样的指令:

我们让第二个button在打开的时候就获取焦点,所以按回车就相当于点击了这个按钮:

bubuko.com,布布扣
<!DOCTYPE html>
<html ng-app="AutoFocus">
<head>
  <title>16.1使用指令修改DOM</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:‘MICROSOFT YAHEI‘;
      font-size:12px
    }
  </style>
</head>
<body>
<div ng-controller="focus">
  <button ng-click="nofocus()">没有焦点</button>
  <br/>
  <button myautofocus ng-click="hasfocus()">有焦点</button>
  <br/>
  <br/>
  <span>{{text}}</span>
</div>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
var autoFocus = angular.module(‘AutoFocus,[]);
autoFocus.controller(focus‘,function($scope){
    $scope.text="没有点击任何按钮";
    $scope.nofocus = function(){
        $scope.text="没有点击任何按钮";
    };
    $scope.hasfocus = function(){
        $scope.text="点击了有焦点按钮";
    };
});
autoFocus.directive(myautofocus‘,function(){
    return {
        link: function(scope,elements,attrs,controller){
            elements[0].focus();
        }
    }
});
bubuko.com,布布扣

一.创建模块AutoFocus

二.通过模块的controller方法创建控制器focus

三.通过模块的directive方法创建指令myautofocus

    myautofocus的工厂函数就是实现元素自动获取焦点这一功能

 

效果截图:

打开页面时:

bubuko.com,布布扣

 

按下回车后:

bubuko.com,布布扣

 

 

    

 

 

 

 

 

angular学习笔记(十九),布布扣,bubuko.com

angular学习笔记(十九)

标签:style   c   class   blog   code   java   

原文地址:http://www.cnblogs.com/liulangmao/p/3754670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!