用指令修改DOM

对于HTML5,input元素有autofocus这个属性,用户在第一次进入界面时就可以和用户交互,对于浏览器来说,可以

把键盘焦点定位在某个元素上,但是对于非input元素,则不可以,我们可以使用指令实现焦点定位。

1:html文件:

2:autoFocus.js 指令文件

3:directCtrl.js 控制器文件

(function(){
    ‘use strict‘;
    var myModule = angular.module(‘myDirectApp‘,[]);
    myModule.controller(‘directController‘,[‘$scope‘,function($scope){
        $scope.text = ‘没有点击时!‘;

        $scope.clickEnsure = function(){
            $scope.text = ‘点击确认时!‘;
        };

        $scope.clickReset = function(){
            $scope.text = ‘点击重置时!‘;
        };
    }]);
})();

注意:在主页面加载js文件,要首先加载autoFocus.js文件,然后再加载directCtrl.js文件,否则会报错。

angular-1.3.8.js:11594 Error: [ng:areq] Argument ‘directController‘ is not a function, got undefined

不能识别这个控制器。

时间: 2024-10-21 11:05:48

用指令修改DOM的相关文章

angularjs应用骨架(4)

继续上一篇 继续了解angular其他内容. 与服务器交互 真正的应用需要和真实的服务器进行交互移动应用和新兴的Chrome桌面应用可能是例外.但是对于此外的所有应用来说,无论是想把数据持久化到云端还是需要其他用户进行实时交互,都需要让应用与服务器进行交互. 为了实现这一点,angular提供了一种叫做$http的服务,它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易.它支持HTTP.JSONP和CORS方式,它还包含了安全性支持,避免了JSON格式的脆弱性和跨站请求伪造(XSRF)

AngularJS 的常用特性(五)

13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务来定义这样的一种东西:对于浏览器所指向的特定 URL,Angular 将会加载并显示一个模板,并实例化一个控制器来为模板提供内容. 在应用中可以调用 $routeProvider 服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可.伪代码如下: 1 var someModule

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f

angular读书笔记(三)

(三)使用路由和$location切换视图 app.js: angular.module('shop',['ngRoute','ngResource','shop.controllers','shop.services','shop.filter']).config(['$routeProvider','$locationProvider','$interpolateProvider',function($routeProvider, $locationProvider, $interpolat

【转】AngularJS——自定义指令

原文链接:http://www.html-js.com/article/1561 创建自定义指令 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令

angular学习笔记(三十)-指令(2)

本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而

angular学习笔记(三十)-指令(1)

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or str

用AngularJS开发下一代Web应用pdf

下载地址:网盘下载 内容简介  · · · · · · AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等.AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习. 本书对AngularJS框架的核心特性做了全面的介绍,包括常用的开发工具和开发环境.作为国内第一本关于AngularJS的书籍

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要