ngCsp

Handle CSP（ Context security policy ） Support for .

When developing such as google This must be used when extending browsers .

CSP Prohibit applications from using eval and Function(string) The generated function . If we need compatibility , We just need to use $parse perform getterfn Without violating these restrictions .

AngularJs Use Function(string) Generating functions at the best speed . Use ngScp Instructions lead to Angular Use SCP Compatibility mode .

Format ：ng-csp

Use the code ：

 <div ng-app="Demo" ng-scp></div>

It's a very big explanation , But I see development google When extending the browser, use , And it is rarely used in the development process , So just mention it at will , If you are interested, please click the link above to have an in-depth understanding of the content security policy .

ngFocus

stay focus Event .

Format ：ng-focus=“value”

value： The expression executed when getting the focus .

Use the code ：

 <div ng-app="Demo" ng-controller="testCtrl as ctrl">

<input ng-focus="ctrl.fn()" ng-model="ctrl.inputValue" />

</div>
 (function () {

angular.module("Demo", [])

.controller("testCtrl", testCtrl);

function testCtrl() {

this.fn = function () {

this.inputValue = "Hello World !!!";

};

};

}());

This command function is, for example, to be a input When you get the focus , Execute the expression function you specified , Achieve what you need .

ngBlur

stay blur Event .

Format ：ng-blur=”value”

value: The expression executed when the focus is lost .

Use the code ：

 <div ng-app="Demo" ng-controller="testCtrl as ctrl">

<input ng-blur="ctrl.fn()" ng-model="ctrl.inputValue" />

</div>
 (function () {

angular.module("Demo", [])

.controller("testCtrl", testCtrl);

function testCtrl() {

this.fn = function () {

this.inputValue = "Hello World !!!";

};

};

}());

This command function is, for example, to be a input When you lose focus , Execute the expression function you specified , Achieve what you need .

ngForm

HTML Form elements are not allowed to be nested .ngForm There are nesting patterns available , For example, the control of a child element needs to be verified .

Format ：<ng-form ></ng-form>

Post code ：

 <ng-form name="outterForm">

<ng-form name="innerFormOne">

<input required ng-model="textOne" />

<button ng-disabled="innerFormOne.$invalid"> preservation - Inside 1</button>

</ng-form>

<ng-form name="innerFormTwo">

<input required ng-model="textTwo" />

<button ng-disabled="innerFormTwo.$invalid"> preservation - Inside 2</button>

</ng-form>

<button ng-disabled="innerFormOne.$invalid || innerFormTwo.$invalid"> preservation - external </button>

</ng-form>

About this directive , The most exciting thing is nested forms , Before that js perhaps jquery It is impossible to verify multiple small forms at the same time when developing, so that large forms can pass the verification , Because itself form Nesting is not allowed , However ngForm That solved the problem , In this way, all nested small forms can be verified first , And then it passed the verification and submitted the form as a whole . It's not too convenient ~

AngularJs ngCsp、ngFocus、ngBlur、ngForm More articles about

  1. AngularJs Learning notes 2- controller 、 Data binding 、 Scope

    After sharing this series of articles last time, a friend suggested that 1.x There is no need to learn the version besides maintenance , You can learn 2.0 Begin to learn , I know that too. 1.x No matter in terms of performance or architecture 2.x good , But I think it's because some of my friends are still using it 1.x edition , because 1. ...

  2. AngularJS Advanced ( Forty ) Create a module 、 service

    AngularJS Advanced ( Forty ) Create a module . service Learning points Use modules to build applications Create and use services Why use and create services and modules ? Services allow you to package reusable functions , Enable it to be used in this application . Modules allow you to package reusable functions ...

  3. AngularJS： When should I use Directive、Controller、Service？

    AngularJS: When should I use Directive.Controller.Service? ( You must read this article , Especially beginners , Okay? Kiss ?) The desert is poor in autumn   translate AngularJS It's a very powerful front end MVC ...

  4. AngularJS Routing series (5)-- UI-Router Routing constraints for 、Resolve attribute 、 Route additional data 、 Route in exit events

    This series explores AngularJS The routing mechanism of , stay WebStorm Lower development . It mainly includes : ● UI-Router Constraint routing parameters ● UI-Router Of Resolve attribute ● UI-Router Attach data to the route ● UI- ...

  5. JavaScript Learning notes ( One )—— Delay object 、 Cross domain 、 template engine 、 Pop-up layer 、AJAX Example

    One .AJAX Example AJAX Its full name is “Asynchronous JavaScript And XML”( asynchronous JavaScript and XML) It refers to a development technology for creating interactive web applications . Improve user experience , Achieve no refresh effect ...

  6. JavaScript Learning summary ( One )—— Delay object 、 Cross domain 、 template engine 、 Pop-up layer 、AJAX Example

    One .AJAX Example AJAX Its full name is “Asynchronous JavaScript And XML”( asynchronous JavaScript and XML) It refers to a development technology for creating interactive web applications . Improve user experience , Achieve no refresh effect ...

  7. mongoDB Study notes are pure dry goods （mongoose、 Additions and deletions 、 polymerization 、 Indexes 、 Connect 、 Backup and recovery 、 Monitoring, etc. ）

    Last update time :2017-07-13 11:10:49 Link to original article :http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - brief introduction Official website : ...

  8. JavaScript Learning summary ( Two )—— Delay object 、 Cross domain 、 template engine 、 Pop-up layer 、AJAX Example

    One .AJAX Example AJAX Its full name is “Asynchronous JavaScript And XML”( asynchronous JavaScript and XML) It refers to a development technology for creating interactive web applications . Improve user experience , Achieve no refresh effect ...

  9. Microsoft 、 Google 、 Amazon 、Facebook The big Silicon Valley factory 91 An inventory of open source software （ Attached download address ）

    There's a lot of expert built code in open source software , Greatly save the time and cost of developers , Big companies keen on open source can always bring us new surprises .2016 year 9 month GitHub According to the report ,GitHub There has been more than 520 Million users and super 30 Ten thousand ...

  10. Google、 Amazon 、 Microsoft 、 Alibaba open source software at a glance

    Google. Amazon . Microsoft . Alibaba open source software at a glance Why big companies release open source projects ? One is that open source can help others develop software faster , Promote innovation in the world , Mainly the consideration of social value . Second, open source can force engineers to write better code . The third is to open ...

Random recommendation

  1. AudioSpecificConfig

    2 Bytes . The blue one below is AudioSpecificConfig part : 000001e0h: 00 00 00 00 00 AF 0011 90 00 00 00 0F 09 00 02; .....? ...

  2. 【BZOJ 3051】【UOJ #57】【WC 2013】 plan

    http://www.lydsy.com/JudgeOnline/problem.php?id=3051 http://uoj.ac/problem/57 This problem needs a plane graph to a dual graph , Point positioning , Minimum spanning tree ...

  3. SPOJ #4 Transform the Expression

    Not hard to know it is simply transform from in-order to post-order.My first idea is to build a tree ...

  4. grep Simple introduction to common grammar

    explain : grep -n keyword Query the document ->-n Indicates print line number grep -c keyword Query the document 1 Query the document 2 ->-c Represents the number of output matching rows , Instead of outputting matching rows . grep -rn ...

  5. Talking about Mybatis Medium ${ } and #{ } The difference between

    Okay , It's been almost a year since I did the real development . I always read other people's blogs , I'm too lazy to write , And I don't know how to blog , Let's practice blogging today . Some time ago, I happened to encounter such a problem in the company . One . Illustrate with examples select * from us ...

  6. 0511 Team project 2.0-- product product backlog

    Introduce Scrum And product backlog Scrum It's not really complicated , But it's not easy to do well , Everybody knows product backlog Importance , But how do we develop and present it , How to prioritize , How to enter ...

  7. Weekly game POJ 3934 Queue

    Description Linda is a teacher in ACM kindergarten. She is in charge of n kids. Because the dinning ...

  8. SSIS Introduction to practice 3： hold SSIS The package starts from A Computer to B The transfer of computers

    Contact SSIS It's been a few days , It's always been A The computer does some demo And modify some of the previous SSIS Program . This time, a script task is dragged into the package , But in A The computer has been unable to open the editor , As shown in the figure below stay B The computer can be turned on SSIS Script editor ...

  9. mysql Table compression

    mysql The history table often appears in , These tables do not modify the data , Only read operations . So we can compress it , Reduce disk space .Innodb Table and MyISAM The compression instructions of the table are different . Let's discuss : One .InnoDB surface ...

  10. CSS The overall layout

    primary coverage : One . Margin margin And filling padding Two . float float And display display 3、 ... and . Main layout Four . Positioning mode posotion One . Margin margin And filling padding 1.margin set up ...