angularJs之如何获取input的焦点（自定义指令）

princejingyun 2016-12-14

代码可直接运行：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

    <div ng-app="myApp" ng-controller="control">
        <input type="text" set-Focus ng-blur="setBlur()">
        <button ng-click="getFocus()">点击获取焦点</button>
    </div>  

<script type="text/javascript">     
    //模型
    var app = angular.module('myApp',[]);

    //控制器
    app.controller("control",function($scope){
        $scope.isCome = false;     
        $scope.isFocus = false;      

        $scope.getFocus = function(){
            $scope.isFocus = true; 
            $scope.isCome = true; 
        };

        $scope.setBlur = function(){
            $scope.isFocus = false;
alert('失去焦点')
        }
    });

    //自定义指令
     app.directive('setFocus',[ function(){
         return {
             scope:false,
             link:function(scope, element){                     
                 scope.$watch("isFocus",function(newValue,oldValue, scope) {
                    
                     if(newValue && scope.isCome){
                         element[0].focus(); //获取焦点
                         alert("获取到焦点了")
                     }
                }, true);;
             }
         };
    }]);

</script>
</body> 
</html>
princejingyun

princejingyun

相关推荐

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

youyouzouzou / 0评论 2014-05-30

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。lin

zbwroom / 0评论 2014-05-30

angularjs link compile与controller的区别详解，了解angular生命周期

我在 angularjs 一篇文章看懂自定义指令directive一文中简单提及了自定义指令中的link链接函数与compile编译函数，并说到两者具有互斥特性，即同时存在link与compile时link不生效。我们已经知道编译函数compile与链接函

Frankywls / 0评论 2019-10-19

Angularjs

Angularjs说白了就是对js的进一步封装。长期以springmvc框架做后台的开发人员知道，它的开发模式非常的明了，MVC。像springmvc一样，angularjs也有注入的概念。Angularjs的指令可以说非常的强大，可以简化我们很多的不必要

lizean / 0评论 2016-12-19

angularjs 控制器

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于An

youyouzouzou / 0评论 2017-02-24

angular常用指令

ng-app 指令定义一个 AngularJS 应用程序的根元素，一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序，在网页加载完毕时会自动引导应用程序。ng-init 指令初始化AngularJS应用程序变量，为应用程序定义了初始值．通

SakuraLu / 0评论 2017-05-11

深究AngularJS—如何获取input的焦点（自定义指令）

　　关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS的onfocus是一样的，当我们点击input框时，就会

lizean / 0评论 2017-09-06

深究AngularJS——监听模型$watch

　　1.$watch是scope内置的函数，它的作用是用来监听数据的变化。它会返回被监听数据的当前值。如果是函数形多，则会接收到F的新旧两个值和作用域对象，示例：。　　为true时：将会检查监听对象的每个属性是否发生变化。

拓宇 / 0评论 2017-09-06

angularjs自定义指令函数传参

问题描述在编写导入指令的时候，需要将函数绑定到指令中，并传入一个参数。<button ng-hide="importing" class="btn btn-warning btn-sm" type="

kkkder / 0评论 2019-06-29

Angularjs自定义指令实现三级联动选择地理位置

"country" : scope.country == null || scope.country == '' ?"province" : scope.province == null || scope.provi

youyouzouzou / 0评论 2017-09-09

深究AngularJS—如何获取input的焦点（自定义指令）

关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS的onfocus是一样的，当我们点击input框时，就会触发

Oranq / 0评论 2017-09-06

深究AngularJS——监听模型$watch

它会返回被监听数据的当前值。如果是函数形多，则会接收到F的新旧两个值和作用域对象，示例：。}, true);为true时：将会检查监听对象的每个属性是否发生变化。

lizean / 0评论 2017-09-06

angularjs 控制器

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于An

CrazyDogWang / 0评论 2017-02-24

Angularjs

Angularjs说白了就是对js的进一步封装。长期以springmvc框架做后台的开发人员知道，它的开发模式非常的明了，MVC。像springmvc一样，angularjs也有注入的概念。Angularjs的指令可以说非常的强大，可以简化我们很多的不必要

zhenghao / 0评论 2016-12-19

angularJs之如何获取input的焦点（自定义指令）

<!DOCTYPE html>. var app = angular.module('myApp',[]);$scope.isCome = false;$scope.isFocus = false;$scope.isFocus = true;$

CrazyDogWang / 0评论 2016-12-14

angularjs的基本功能介绍

带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令-------------------------------------------------------------

Oranq / 0评论 2016-11-14

AngularJS简介

AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。AngularJS是通过指令扩展了HTML，且通过表达式绑定数据到HTML。ng-app指令定义一个Ang

CrazyDogWang / 0评论 2016-08-31

Angularjs的基本结构

AngularJS是一款非常强大的前端MVC框架。大概可以分为这三类：。它是一个单例，就是无论这个服务注入到任何地方，对象始终只有一个实例。它不想我们平时在js中用的function函数，因为服务被定义在一个模块中，所以它的使用范围是可以被管理的。这也就避

princejingyun / 0评论 2016-08-22

JavaScript强化教程——AngularJS 指令

AngularJS通过被称为指令的新属性来扩展HTML。AngularJS通过内置的指令来为应用添加功能。AngularJS允许你自定义指令。ng-app指令初始化一个AngularJS应用程序。完整的指令内容可以参阅AngularJS参考手册。ng-ap

CrazyDogWang / 0评论 2016-07-22

angularjs学习2

所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。先列出一些关键的内置指令，顺便简单说说作用域的问题。将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。该指令被调用时会初始化内部作用域。每一次用AngularJS都离不开这个指

Oranq / 0评论 2016-06-15

搭前端框架要注意的东东

AngularJs诞生于2009年，最初由MiskoHevery和AdamAbrons开发，后来成为Google的项目。AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构

Oranq / 0评论 2016-06-06

自定义指令

为了让AngularJS能够调用我们的指令，需要修改指令定义中的restrict设置。这个设置告诉AngularJS在编译HTML时用那种声明格式来匹配指令定义，我们可以指定一个或者多个格式元素、属性、类、注释。template: '<a href=

Oranq / 0评论 2016-05-31

angularJS基础学习笔记

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。template : "<h1>自定义指令!--t

CrazyDogWang / 0评论 2016-04-12

AngularJS指令compile和link函数的真相

它允许你创建高度语义化和可重用的组建。从某种意义上说，您可以将它们视为Web组件的最终先驱。相反，很骚有涉及到compile和link函数的不同，更不要说pre-link与post-link函数了。大多数教程都简洁的提及到compile函数主要被用在Ang

zhenghao / 0评论 2019-06-27

AngularJS参数transclude

transclude是一个可选的参数。如果设置了,其值必须为true,它的默认值是false。嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常 好的配合。我们可以将整个模板,包括其中的指令通过嵌入全部传入一个指令中。这样做可

Oranq / 0评论 2015-05-04

博弈AngularJS讲义(15) - HTML Compiler

Angular HTML编译器可以让开发者通过定制标签或者属性来拓展HTML语法。通过Angular HTML编译器，我们可以给任何HTML元素及其属性赋予额外的行为，丰富HTML的语义。Angular把这种行为扩展称作指令。例如我们无法在HTML语法中声

zhaosnow / 0评论 2014-12-28

博弈AngularJS讲义(11) - 指令

本章我们将详细讲解如何用AngularJS实现自定义指令来扩充HTML.简单来说，指令就是Angular编译器能够识别并处理的附加在DOM元素上的标记。Angular HTML编译器会在应用初始化阶段给这些DOM元素及子元素赋予额外的行为动作或者转换。An

zbwroom / 0评论 2014-12-11

博弈AngularJS讲义(2) - 核心概念

在使用AngularJS之前，我们有必要梳理一下AngularJS核心概念及实现原理，以便于写出结构良好的代码。本章我们将结合简单的实例简要介绍Angular的重点概念，我们将附上AngularJS官方文档上的原文，帮助大家更好的理解概念：。如果一方改变，

zhenghao / 0评论 2014-11-27

关于Angularjs中自定义指令一些有价值的细节和技巧

template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样。还有一种对象设置方法，就是设置一种隔离的scope，在使用隔离scope的时候，提供了三种方法同隔离

zhenghao / 0评论 2019-06-27

AngularJS_3

angularJS通过使用自己的事件处理循环，改变了传统js工作流。这使得js的执行被分成原是部分和拥有angularJS执行上下文的部分。这个循环是由两个小循环组成的，这两个小循环用来处理$evalAsync列队和$watch列表。这个稳定具体指的是$e

lizean / 0评论 2014-09-01

AngularJS使用$on、$emit和$broadcast在作用域之间进行交互

AngularJS中的作用域具有继承性，并且结构是嵌套的。也就是说，对于每个Angular应用或者ng-app来说，只有一个主作用域$rootScope，其他所有作用域都会继承这个主作用域，或者嵌套在这个主作用域内部。通常情况下，你会发现作用域之间不会共享

lizean / 0评论 2014-08-31

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

zhenghao / 0评论 2014-05-30

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。});

lizean / 0评论 2014-05-30

AngularJs 入门（一）--前言

AngularJs 入门（一）前言AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。其实只是符合公司水平要求才这么整的啊。。话不多说，

SakuraLu / 0评论 2019-06-26

温故知新:Angular下的 directive

Angularjs提供的directive指令可以用来写自己的命令甚至标签。});在这里面定义了名为example的directive，它是一个function,返回值是一个对象:. restrict属性表明example要匹配的的是一个标签('E')还是

lizean / 0评论 2013-12-20

AngularJS心得回顾

之前对AngularJS有一定的了解，在此记录下对AngularJS自己的一点看法，当刚看到这个框架的时候我不禁感叹Google团队的设计者们的 创造性，和创新性实在是太惊人了，闲话不多说了。。写下那些让我感叹的东东吧。同时我也相信你在html中基本上不会

youyouzouzou / 0评论 2013-12-06

[译] 如何使用 TypeScript 编写自定义 AngularJS 指令？

AngularJS 框架有很多强大的特性，其中指令是广为人知的。在这篇文章中，我将告诉你如何用 TypeScript 编写自定义 AngularJS 指令。首先，我将讲一下关于指令的基本知识，但如果你想直接看 TypeScript 代码的，你可以跳过基本。

kkkder / 0评论 2019-06-20

自定义指令实现手风琴菜单 AngularJS

0x00 前言自定义指令在angular中是比较难的一个点，写了这么长时间也只会一些简单的单指令，翻出《用AngularJS开发下一代Web应用》，拿出里面的accordion例子好好啃一下。

zhenghao / 0评论 2019-06-20

详解Angularjs 自定义指令中的数据绑定

有关自定义指令的scope参数，网上很多文章都在讲这3种绑定方式实现的效果是什么，但几乎没有人讲到底怎么使用，本篇希望聊聊 到底怎么用 这个话题。自定义指令，是 Angularjs 用来实现组件化的方式，相比于 React 和 Vue 的组件化方式，它真的

闲听风月 / 0评论 2018-07-19

关于Angularjs中自定义指令一些有价值的细节和技巧小结

template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样。还有一种对象设置方法，就是设置一种隔离的scope，在使用隔离scope的时候，提供了三种方法同隔离

雅特岚蒂斯 / 0评论 2018-04-22

AngularJS实现自定义指令及指令配置项的方法

本文实例讲述了AngularJS实现自定义指令及指令配置项的方法。分享给大家供大家参考，具体如下：。restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment. }]);更多关

雅特岚蒂斯 / 0评论 2017-11-20

angularjs利用directive实现移动端自定义软键盘的示例

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘，刚接到需求有点懵，因为之前没有做过，后来理了一下思路发现这东西也就那样。先看一下实现之后的效果：。产品经理那边给的原因是iPad屏幕本来就小，如

夏小球 / 0评论 2017-09-20

AngularJs每天学习之总体介绍

AngularJS是为了克服HTML在构建应用上的不足而设计的。angualrjs1.x：目前比较稳定版本。　　angularjs2.x:基于typescript编写，他在1.x基础上改动很大，偏向于移动端的开发，ES6标准编写　　angularjs4.x

howtoseegoodbye / 0评论 2017-08-07

收藏AngularJS中最重要的核心功能

它们充当控制器和视图之间的胶水。AngularJS团队将它作为模型视图。以上是小编给大家收藏AngularJS中最重要的核心功能 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

学而思之 / 0评论 2017-07-09

详解angularJS自定义指令间的相互交互

transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。controller是多调用性的数据共享，指令与指令间进行交互时也可以设置一些方法数据，在其他标签中也可以调用。^

codergirl / 0评论 2017-07-05

AngularJS实现自定义指令与控制器数据交互的方法示例

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考，具体如下：。</html>更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门

carrymyteams / 0评论 2017-06-19

深究AngularJS如何获取input的焦点（自定义指令）

关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS的onfocus是一样的，当我们点击input框时，就会触发

Inuyasha / 0评论 2017-06-12

AngularJS自定义指令详解（有分页插件代码）

调用自定义指令时，需要在HTMl 元素上添加自定义指令名。自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。在html页面调用该指令时需要以 - 分割，如： my-directive。transclude boolean

飞鹰 / 0评论 2017-06-12

Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive。Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。@Scripts.Render以上是AS

Inuyasha / 0评论 2017-05-27