Order Continuation <AngularJs>

Source: Internet
Author: User

Compile "object or function"

The compile option itself will not be used frequently, but the link function will be used frequently. Essentially, when we set the link option, we actually created a postlink () Link function so that the compile () function can define the link function. Typically, if you set the compile function, we want DOM operations to be done before the instruction and real-time data is put into the DOM, where DOM operations such as adding and deleting nodes are safe.

The compile and link options are mutually exclusive. If both options are set, the function returned by compile is treated as a link function, and the link option itself is ignored.

the compilation function is responsible for converting the template dom. The link function is responsible for linking the scope and the DOM . The DOM can be manipulated manually before the scope is linked to the DOM. In practice, this kind of operation is very rare when writing custom directives, but there are several built-in directives that provide such functionality.

Link
 functions//TODO: return function//link  };

Link functions are optional. if a compilation function is defined, it returns a link function , so the compilation function overloads the link function when all two functions are defined. If our instructions are simple and do not require additional settings, you can return a function from the factory function (callback function) in place of the object. If you do this, the function is a link function.

Ngmodel

It provides a lower-level API to handle data within the controller, which handles data binding, validation, CSS updates, and other things that do not actually manipulate the DOM, and the Ngmodel controller is injected into the instruction with Ngmodel, which contains some methods. In order to access ngmodelcontroller you must use the Require setting.

The following elements are commonly used in Ngmodelcontroller:

    • 1. In order to set the view values in the scope, you need to call the Ngmodel. $setViewValue () function.

The $setViewValue () method is suitable for listening to custom events in custom directives (such as using a jquery plug-in with callback functions), and we want to set $viewvalue and execute digest loops at callback.

Angular.module (' myApp ')). Directive (' Mydirective ',function() {            return{require:'? Ngmodel ', Link:function(Scope, ele, Attrs, Ngmodel) {if(!ngmodel)return; $(function() {Ele.datepicker ({
callback function OnSelect:function(date) {//set up views and invoke applyScope. $apply (function() {Ngmodel. $setViewValue (date); }); } }); }); } }; });
  • 2. $render method to define how the view is rendered
  • 3. Properties
    1.$viewValue
    The $viewValue property holds the actual string required to update the view.
    2.$modelValue
    $modelValue is held by the data model. The $modelValue and $viewvalue may be different depending on whether the $parser pipeline is operating on it.
    3.$parsers
    The value of the $parsers is an array of functions, where functions are called one after another in the form of pipelining. Ngmodel the value read from the DOM is passed to the function in the $parsers and is processed sequentially by the parser in it.
    4.$formatters
    The value of $formatters is an array of functions, where functions are invoked one at a time as the value of the data model changes in the Pipelined form. It has no effect on the $parser pipeline and is used to format and convert values to be displayed in the control that binds the value.
    5.$viewChangeListeners
    The value of $viewChangeListeners is an array of functions, where functions are invoked one at a time in a pipelined manner when the values in the view change. With $viewchangelisteners, similar behavior can be achieved without the use of $watch. Because the return values are ignored, these functions do not require a return value.
    6.$error
    $error Object holds the validator name without validation and the corresponding error message.
    7.$pristine
    The value of the $pristine is Boolean and can tell us whether the user has modified the control.
    8.$dirty
    The value of $dirty, in contrast to $pristine, tells us whether the user has interacted with the control.
    9.$valid
    $valid value can tell us if there are errors in the current control. When there is an error value of false, there is no error value of true.
    10.$invalid
    $invalid value tells us if there is at least one error in the current control, and its value is the opposite of $valid. Not to be continued ....

Note: I am also just beginning to learn, this summary of the bad, a lot of details also need to master good again to review the supplement, if you like this article, recommend mutual encouragement , thank you!

Order Continuation <AngularJs>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.