Summary of Angualrjs (II.)

Form Control variables
Form Control variables

// whether the field has not changed fromname.inputfieldname. $pristine // whether the field changes fromname.inputfieldname. $dirty // field is valid fromname.inputfieldname. $valid // Invalid field fromname.inputfieldname. $invalid // field error message fromname.inputfieldname. $error

CSS Styles

ng-valid settings When form validation is passed
ng-invalid settings when a form validation fails
ng-pristine form is not passive before owning
Ng-dirty After the form has been passive

Custom form Validation

Custom Form Validation Ngmodel Properties summary
$parsers saves the processor functions from Viewvalue to modelvalue bindings. In the future, they will execute
$formatters Save the processor function
$setViewValue call $setviewvalue from view to model binding to save Viewvalue
$render   When the model changes, how to update the view, bind from model to view, call Ctrl. $render method to render Viewvalue to the page
$setValidity Set validation results
$viewValue   attempted value
$modelValue   value in model

$scope binding event

function= 0;　　$scope. $on (' myevent ',function() {$scope. Count+ + +; })}

View

//To the scope where the DOM is located, that is, access to the Count property is only accessible in DOM with more than one sibling <  ng-click= "$emit (' MyEvent ')"></button>// Passed to the scope of the following DOM in the same class, except that     access to the Count property <ng-click= "$" is only accessible in the DOM below the sibling Broadcast (' MyEvent ') "></button>

customizing form validation directives with Ngmodel-related properties and methods
The attribute summary in Ngmodel has been mentioned above
Here is an even-numbered verification instruction

Angular Summary of form directives
Input property
Name
Ng-model
Ng-required
Ng-minlength
Ng-maxlength
Ng-pattern Matching mode
Callback when the Ng-change value changes

The use of Ngmodelcontroller methods and properties

Ngmodelcontroller method
$render ();
It is called when the view needs to be updated. Instructions that use Ng-model should implement this method on their own.

$isEmpty (value);
This method is used to determine whether the input value is empty.
For example, a directive that uses ngmodelcontroller requires that the method be used when it is necessary to determine if there are any input values. This method can be used to determine whether the value is undefined, ', null, or Nan.
You can reload the method to suit your needs.

$setValidity (Validationerrorkey, isValid);
This method is used to change the validation status and to notify the table when the validation criteria for changes are controlled.
This method should be called by a validator. For example, a parser or a format function.

$setPristine ();
This method is used to set control to the original state.
The method can remove the ' Ng-dirty ' class and restore control to its original state (' Ng-pristine ' Class).

$cancelUpdate ();
This method is used to cancel an update and reset the value of the INPUT element to prevent $viewcalue from occurring, which is raised by a pending debounced event or because the input box waits for some future event.

If you have an input box that uses the Ng-model-options directive and set the Debounced event for it or something similar to blur, you might run into a value in the box for a certain period of time and Ngmodel's $ The Viewvalue property does not maintain synchronization.
In this case, if you try to update Ngmodel's $modelvalue before the Debounced/future event occurs, you are likely to encounter difficulties because Angularjs's dirty The cheching mechanism does not actually tell whether a model has changed.
The $cancelUpdate () method should be called before changing the model of an input box.
Remember, this is important because this ensures that the input field can be updated by the new model value, and the pending operation will be canceled.

Properties in the Ngmodelcontroller
$viewValue
Actual values in the view

$modelValue
The value in model, which amounts to a controller bound together

$parsers
An array of functions to be executed, whenever the controller reads a value from the DOM, it will act as a pipe. The function is called in turn and the result is passed to the next one. The final value will be passed to the model. This will include the process of validating and converting values.

For the validation step, the parser will use the $setvalidity method and will return undefined for unqualified values.

$formatters
An array containing the function to be executed, whenever the value of the model has changed, it will be a pipe. Each of these functions is called sequentially, and the result is passed to the next function. This function is used to format the values that the model passes to the view.

$viewChangeListeners
As long as the value of the view changes, the function is executed. The function executes without parameters, and its return value is ignored. It can be used in extra #watches.

$error
An object that contains all the error

$pristine
If the user has not yet interacted, the value is true.

$dirty
If the user has already interacted, the value is true.

$valid
If there is no error, the value is true.

$invalid
If there is an error, the value is true.


instruction and controller interaction and multiplexing

Directives are used to reuse the components that are used to generate the UI.

IE conditional comments in HTML

The IE conditional comment is a special HTML comment that can only be understood by IE5.0 and later. For example, ordinary HTML annotations are:

<!--this is a comment-->

And only IE-readable IE conditional annotations are:

<!--[if ie]> <! [endif]-->

"Non-IE conditional comment":

<!--[if! ie]>--> Non-ie HTML Code <!--<! [endif]-->

"Non-specific version of IE conditional comment" (rarely used):

<!--[if! LT IE 7]><! [ignore[--><![ Ignore[]]>code for browsers that match the IF condition<!--<! [endif]-->

In short, all browsers except "IE on Windows" will assume that conditional annotations are just plain HTML comments. You cannot use conditional annotations in CSS code. IE conditional comment is very useful for IE hide or show specific code method, compared to in the CSS with strange _/manufacturing bug, using IE conditional comments to write CSS "hacks" is a more reasonable method. Popular point, conditional annotations are some if judgments, but these judgments are not executed in the script, but are executed directly in the HTML code.

1. The basic structure of the conditional comment is the same as the HTML comment (<!––>). Browsers outside of IE will therefore treat them as plain annotations and ignore them entirely.
2. IE will determine whether the content in the conditional comment is parsed as if the normal page content is parsed, based on the IF condition.
3. Conditional annotations Use HTML annotation structures, so they can only be used in HTML files and not in CSS files.

Syntactically, this is a fairly legitimate common HTML comment. Any browser will assume that the part between <!– and –> is a comment and ignores it. But IE will also see where [if ie]> and start explaining the next code until it encounters <! [EndIf]. Therefore, the following code will not be displayed in any other browser face.

The "comparison operator" gives you more flexibility to control the version of IE by adding "comparison operators" in front of IE. The legal operators are as follows:

• LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.
• LT: is less than shorthand, that is, smaller than the meaning.
• GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.
• GT: is greater than shorthand, that is, the meaning of greater than.
• ! : Is not equal to the meaning of the JavaScript is not equal to the same judge

Example:

• <!–[if GT ie 5.5]>/If IE version is greater than 5.5/
• <!–[if LTE IE 6]>/if IE version is less than or equal to 6/
• <!–[if! ie]>/If the browser is not IE/

While it may seem more time consuming to use conditional annotations for the first time, you'll find it handy when you debug your CSS later. With conditional annotations You only need to write the HTML comment once, and with the bug you need to write a long, ugly code for each rule, and often it is written to change other hacks hacks. Otherwise, the conditional comment is a valid HTML comment for any browser that does not support it. Here are some of the differences between conditional annotations and CSS hacks:

1. Hacks are browser-based bugs that may eventually be fixed.
2. Conditional comments are based on IE specific code, and this recognition mechanism is not removed at any time.
3. Every browser can see your hacks, maybe the next version or a new browser will make an error on your hacks code.
4. Only IE can see the conditional comment, through the additional "IE file" to affect the page, other browsers will not download it at all.
5. Hacks doesn't make sure which browsers are in effect and which ones are not, and the more hacks you use, the more confusing your code is.
6. Conditional annotations Take advantage of version matching to make it easy for authors to write code to a specific version

Let the low version IE also can run the HTML5+CSS3 website 3 kinds of solutions

Now we can choose a very large number of browsers, so the browser environment is also a wide range, the same browser also contains a variety of different versions, different versions of the rendering methods are also differences, they support the HTML5, CSS3 features are probably not the same. This has caused web developers to face a huge number of browser types as they develop their web sites.

If the development of the minimum standards, such as IE6 not supported by the features, we do not have to write this article, but I think this is very rare, more development, in the modern browser using the features they support, and in the early browser to do a certain downgrade processing, which is called "progressive enhancement", is also the focus of this article. In the following way, I hope that the site can also be able to magically run on the low version of IE browser better!

Htmlshiv.js

Remy Html5shiv uses JavaScript to create HTML5 elements (such as main, header, footer, etc.). The elements created by JavaScript to some extent are styleable (can be styled). We can spend a lot of time thinking about how it works, but who cares? This strategy still has to be used on all product sites.

<!--[if LT IE 9]><script src= "Http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js" ></script><! [endif]-->

Selectivizr.js

Selectivizr.js is an incredible resource for populating unsupported CSS selectors and attributes, including important last-child. In the recent redesign, I embed the SELECTIVIZR and don't miss any details on older IE browsers. Here is my implementation code:

<!--[If LTE IE 8]><script src= "Http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js" ></script ><! [endif]-->

Modern projects are absolutely essential. Only when the old version of IE is loaded.

In addition, the Modernizr script has added HTML5 browser support Script Html5shiv, we just reference moernizr.js file, IE9 the following IE browser support HTML5 added semantic tags such as nav, section, article, etc. You can also use CSS to style them.

Conditional Comment

You must have seen the most Earth-like situation below. But whether ugly or not, the code actually runs exactly as expected:

<! DOCTYPE html><!--[if LT IE 7]> 
The above method is for CSS, to write some of the different versions of IE different styles. First determine which version of IE the user uses, and then add the version of the class on the label, so that it is convenient to hack.
Then we can write this in the CSS file:
. IE6 xxx {};. IE7 xxx {};
This is the most efficient method that is currently considered by small-scale, which does not require or wait for JavaScript, and does not require a heavyweight JavaScript library. The styles you define are immediately effective and do not have a splash screen.
Although IE is catching up with rivals, the new version of IE has changed a lot and wants to reinvent the Web experience with new ie. But in the domestic old version of IE is still relatively popular. The good news is that these resources run well on all modern browsers and are not expensive!







Summary of Angualrjs (II.)