首页 > 代码库 > angular学习笔记(十九)

angular学习笔记(十九)

2024-07-06 05:00:25   236人阅读

本篇主要介绍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在打开的时候就获取焦点,所以按回车就相当于点击了这个按钮:

<!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>
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();
        }
    }
});

一.创建模块AutoFocus

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

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

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

 

效果截图:

打开页面时:

 

按下回车后:

 

 

    

 

 

 

 

 


联系
我们