图片 6

根究AngularJS如何获取input的规范_AngularJS_脚本之家

1. 写在前面

一:自定义指令常用模板

AngularJs学习总结-了解基本特性(-)

 

 
 现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它。之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下。angularjs学习小白一枚,欢迎大神指正。

   AngularJs是什么?

 
 简单来说,即javascript的一个框架,通过script标签添加到网页中。即我们使用angularjs时,需要引入下面的代码。

 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

通常建议把脚本放在<body>元素的底部,作用是:提高网页加载速度。因为html加载不受制于脚本加载。

   AngularJs的作用?  

   AngularJS
使得开发现代的单一页面应用程序(SPAs:Single Page
Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素”背后”添加代码。
  • AngularJS 支持输入验证。

   
像现在移动端基本上使用单页面的比较,就是利用angular的路由转换进行的。像我们现在这个项目也是使用的单页面。即在主页面里面,即跳转的页面都在主页面里面进行。截图如下:

    图片 1     

    AngularJs表达式 

    AngularJS 表达式写在双大括号内:{{ expression
}}。

    AngularJS 表达式把数据绑定到
HTML,这与 ng-bind 指令有异曲同工之妙。

    AngularJS 将在表达式书写的位置”输出”数据。

    AngularJS 表达式 很像 JavaScript
表达式:它们可以包含文字、运算符和变量。

图片 2

<!doctype html>
<!-- 标记angularjs处理整个html页并引导应用 -->
<html ng-app>  
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
     </head>
     <body>
        <p>name:{{"ting"+"feng"}}</p>
        <p>number:{{5+5}}</p>
        <div ng-init="person={name:'tingfeng',age:'13'}">
           <p>name:{{person.name}}&nbsp;age:{{person.age}}</p>
        </div>
    </body>

</html>

图片 3

   AngularJs在html中的应用

 
 主要通过ng-directive扩展html,angularjs指令是以ng作为前缀的html属性,包含有四大特性:mvc,模块化,指令系统(directive),databinding

   ng-init:该指令初始化angularjs应用程序变量。比如下面的列子:

图片 4

<!doctype html>
<!-- 标记angularjs处理整个html页并引导应用 -->
<html ng-app>  
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
     </head>
     <body>
        <div ng-init="name='tingfeng'">
             <p>name is:</p>
        </div>
     </body>

</html>

图片 5

 
 ng-app:该指令表示定义一个angularjs应用程序。通常放在html后面,也可以在局部使用ng-app指令,比如<div
ng-app>则angularjs脚本仅在该div中运行,即表明从此处开始,所有内容均为angularjs进行管理。

   ng-model:该指令是指把元素值(比如输入框的值)绑定到应用程序中。

 
 ng-bind:该指令是把应用程序数据绑定到html视图中。使用相应的指令,即可利用angularjs操作html页面。具体怎么使用,我们来看看代码。

图片 6

 此时利用ng-model绑定到setname模型变量上,当在输入框中输入值时,相应的setname也会变化。可自行贴码测试。

 关于$scope解释

 $scope是什么?有什么作用?如何使用它?

 简单来说,scope是一个pojo(plainoldjavascriptobject),类似于一个对象,有属性和方法,scope是一个pojo(plainoldjavascriptobject),类似于一个对象,有属性和方法,scope提供了watch()和watch()和apply()工具方法。angularjs的mvc全部借助于$scope进行的。

 特性:1.是表达式的执行环境(或者作用域)

         2.scope是一个树型结构,与dom标签平行,其上含有一个scope是一个树型结构,与dom标签平行,其上含有一个rootscope处于最顶层。

         3.scope会继承父scope会继承父rootscope的属性和方法。

         4.$scope可以传播事件,类似于dom,可以向上传播也可以向下。

         5.$scope不仅是mvc的基础,也是后面实现双向绑定的基础。

 AngularJs的组成部分

 模板:即编写的html和css的文件,展现应用的视图。angularjs可以在html中构建自己的html标记!
 控制器:与ajax不同,不需要另外编写侦听器或dom控制器,因为它已经内置到angularjs中。 好处:便于编写,测试,维护和理解。
        
 模型数据:模型是从angularjs做用域对象的属性引申的。模型的数据可能是js对象,数组或基本类型,但都属于angularjs作用域对象。

 如何理解angularjs中的作用域?

   
 即一个作用域可以视作模板,模型和控制器协同工作的粘接器,angularjs使用作用域,同时还有模板中的信息,数据模型和控制器。这些可以帮助模型和视图分离,但他们两者确实时同步的!任何对于模型的更改都会即时反映到视图上,任何视图的更改都会被立刻体现在模型中。

   
 视图:在angularjs中,一个视图是模型通过html模板渲染之后的映射。即不论模型什么时候发生变化,angularjs会实时更新结合点,随之更新视图。

     还是贴码来看,更加直观!

图片 7

<!doctype html>
<html ng-app="HelloAngular"> 
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
            //模块化
           var myModule = angular.module("HelloAngular", []); --控制模板HelloAngular
           myModule.controller("helloAngular", ['$scope',
            function HelloAngular($scope) {
                $scope.value = {
                    name: 'jiangting'
                };
            }
        ]);       
       </script>
     </head>
     <body>
     <!-- mvc看angular-->
        <div ng-controller="helloAngular">  --控制器为helloAngular
             <p>{{value.name}},hello!</p>
        </div>
        <!-- angular 模块化 -->  

     </body>
</html>

图片 8

我们来看看controller的应用,即控制器,即控制器通过操作数据,将其进行绑定,展现在html页面上。

  AngularJS 模块(Module) 定义了 AngularJS
应用。

  AngularJS 控制器(Controller) 用于控制 AngularJS
应用。

 
ng-app指令定义了应用, ng-controller 定义了控制器。我们用上面的列子来看:

AngularJS模块定义应用:

 var myModule = angular.module("HelloAngular", []); --控制模板HelloAngular

angularjs控制器控制应用:

图片 9

 myModule.controller("helloAngular", ['$scope',
            function HelloAngular($scope) {
                $scope.value = {
                    name: 'jiangting'
                };
            }
        ]);       

图片 10

了解前端mvc

   关于controller特性:

      1.不要试图去复用controller,一个控制器一般只负责一个小块视图
      2.不要直接在controller中操作dom,这不是其职责
      3.不要在controller里面做数据过滤的操作,ng有filter服务4.不要在controller里面做数据格式化,ng有很好用的表单控件5.controller是不会互相调用,控制器之间的交互会通过事件进行,通过filter服务4.不要在controller里面做数据格式化,ng有很好用的表单控件5.controller是不会互相调用,控制器之间的交互会通过事件进行,通过scope进行调用。

下面看下如何自定义指令系统,代码如下:

图片 11

<!doctype html>
<html ng-app>
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
            //指令系统
        var myModule = angular.module("MyModule", []);
            myModule.directive("hello", function() {
            return {
                restrict: 'E',
                template: '<div>Hi everyone!</div>', --这里我们插入一段html标签
                replace: true
            }
        });
       </script>
     </head>
     <body>   
        <hello></hello>
     </body>

</html>

图片 12

 
 directive中,后面返回有三个参数,其中template中指所插入的html标签。现在我门自己来写一段html代码,看看如何将其变为angularjs的写法。

   原静态html代码如下:

图片 13

 <ul>
          <li>
             new1
             <p>just a test page1</p>
          </li>
          <li>
             new2
             <p>just a test page2</p>
          </li> 
 </ul>

图片 14

将其改版为angularjs的写法如下:

图片 15

<!doctype html>
<html ng-app>
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
         //$scope为控制器的作用域,
         //angularjs作用域:可以视作模板,当应用启动之后,会有一个根作用域被创建出来,而控制器的作用域是根作用域的一个典型后继。
            function  newsCtrl($scope){
                 $scope.news=[
                    {"content":"new1",
                     "introduce":"just a test page1"},
                    {"content":"new2",
                     "introduce":"just a test page2"}
                 ];
                 $scope.phones={
                    length:"4"    
                    // 单个的属性不能加分号,多个属性用逗号分隔
                 };

            }
        </script>
     </head>
     <body ng-controller="newsCtrl">
      <ul>
          <li ng-repeat="new in news">
              {{new.content}}
              <p>{{new.introduce}}</p>
          </li>
      </ul> 
     </body>

</html>

图片 16

这里说下ng-repeat指令,即相当于angularjs迭代器,当使用ng-repeat执行命令时,从数组中获取数据。

关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS的onfocus是一样的,当我们点击input框时,就会触发该事件,而在该事件里我们可以调用一个函数。所以,当人家问你如何获取焦点时一般的意思是,如果我进行了某些操作后,不用鼠标点击是如何自动获取焦点,问题的关键是“自动”。

下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识:

因为AngularJS没有像原生JS那样可通document.getElementById直接获取元素的功能,所以只能通过自定义指令的方式实现,所以需要实现这个,我们还得有angularjs自定义指令的基础。可参考://www.jb51.net/article/115979.htm

angular.module.directive('uiDirective', function() { return { restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合 priority:Number,//设置指令执行优先级,在某个DOM上优先级高的会先执行 terminal:Boolean, template:String or Template Function,//就是设置模板,和下面的templateUrl属性二个只可以设置一个,目的一样 templateUrl:String or Template Function,//除了字符串,这二个属性还可以设置函数 replace:Boolean,//指令模板是否替换原来的元素 scope:Boolean or Object, controller:String or function(scope, element, attrs) { ... }, require:String or Array, //你需要知道link在每个实例都执行一遍,compile全程只会执行一遍 link: function(scope, element, attrs,ctrl) { ... }, compile:function { //常用的就是compile的此处写执行一次的代码,或者在link方法里面写和dom有关的操作 } };}); 

2. 代码示例

二:一些属性说明

各位看官,芭蕉即焦点,如有戳中你的笑点,概不负责。温馨提示:下面代可直接拿去编辑器运行看效果哦,哎,没办法,就是这么负责。

可以设置boolean或者对象,先来说说boolean,这个比较简单:

   孙爷爷我要去取芭蕉扇了   //&#27169;&#22411; var app = angular.module; //&#25511;&#21046;&#22120; app.controller("control",function{ $scope.isCome = false; //&#21028;&#26029;&#22823;&#22307;&#26469;&#20102;&#27809; $scope.isFocus = false; //&#21028;&#26029;&#26159;&#19981;&#26159;&#35201;&#21462;&#33453;&#34121;&#25159; $scope.getFocus = function(){ $scope.isFocus = true; //&#22823;&#22307;&#26469;&#20102; $scope.isCome = true; //&#35201;&#21462;&#33453;&#34121;&#25159; }; $scope.setBlur = function(){ $scope.isFocus = false;//&#27809;&#20154;&#35201;&#26469;&#21462;&#33453;&#34121;&#25159;&#20102; } }); //&#33258;&#23450;&#20041;&#25351;&#20196; app.directive('setFocus',[ function(){ return { scope:false, link:function{ scope.$watch("isFocus",function(newValue,oldValue, scope) { //&#22823;&#22307;&#26469;&#20102;&#65292;&#19988;&#35201;&#21462;&#33453;&#34121;&#25159; if(newValue &amp;&amp; scope.isCome){ element[0].focus(); //&#33719;&#21462;&#28966;&#28857; alert("&#29492;&#21733;&#65292;&#32769;&#29275;&#19981;&#22312;&#23478;&#65292;&#25105;&#19968;&#20171;&#22899;&#23376;&#36824;&#19981;&#26159;&#20320;&#35828;&#20160;&#20040;&#25105;&#23601;&#29031;&#20570;&#65292;&#21487;&#20320;&#36827;&#20837;&#20154;&#23478;&#30340;&#36523;&#20307;&#20063;&#19981;&#25171;&#22768;&#25307;&#21628;&#65292;&#36827;&#20102;&#23601;&#36827;&#20102;&#65292;&#36824;&#25630;&#24471;&#25105;&#37027;&#20040;&#38590;&#21463;&#65292;&#27714;&#20320;&#21035;&#25630;&#20102;&#65292;&#32473;&#65292;&#33453;~~~&#34121;~~~&#25159;&#65281;") } }, true);; } }; }]); 

1.当设置true的时候,表示继承父scope,是一个子scope;

3. 代码说明

2.当设置false的时候,直接使用父scope。

首先说明一下,我本后台Java工程师,因前端大牛搭了AngularJS后却辞职去了新浪,一下无人接手,我便自告奋勇接了活。为了啥?为了涨工资塞!

还有一种对象设置方法,就是设置一种隔离的scope,在使用隔离scope的时候,提供了三种方法同隔离之外的地方交互,下面用一个例子来一一说明:

该文默认读者对angualrJS有一定的基础语法,此文的亮点在哪呢?亮点在于实现获取焦点的逻辑。angularjs文档只会告诉你用自定义指令获取焦点,如代码:

angular.module.directive("scopeExample", ['$rootScope', function { return { restrict: 'A', scope: { _userDataName: "=userDataName", _onSend: "&onSend", _fromName: "@fromName" }, template: `  点击按钮调用父级的方法   
     var app = angular.module; app.directive('setFocus', function(){ return function{ element[0].focus;  
  • fromName={{newfromname}}
  • 这是从父级获取到的{{_userDataName}}

这块代码,除了能进入页面获取焦点,还能干啥?还能告诉初学者说,亲,自定义指令里面还可以直接return
一个function哟。

`, link: function($scope, element, attrs) {
//使用@符号可将本地作用域的变量与DOM属性的值进行绑定,即这里通过@得到父类fromName的值
$scope.newfromname = $scope._fromName; $scope._useParentMethod =
function() { //使用&符号可以在其中调用父类的方法 $scope._onSend({
“email”: { “email”: “yelloxing@gmail.com” } }); console.log; }; }
};}]);