zoukankan      html  css  js  c++  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在打开的时候就获取焦点,所以按回车就相当于点击了这个按钮:

    复制代码
    <!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的工厂函数就是实现元素自动获取焦点这一功能

     

    效果截图:

    打开页面时:

     

    按下回车后:

     

     

        

  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址:https://www.cnblogs.com/minghui007/p/7206144.html
Copyright © 2011-2022 走看看