How to use Angularjs to make a complete table of four __ Customize the properties of the Ng-model tag to support HTML elements other than input

Source: Internet
Author: User

Sometimes we need to add ng-model for non-input types of elements to achieve two-way data binding, thus reducing redundant code, then you can try the way

For example: I use the contenteditable attribute on my page to implement a DIV element that can be compiled directly by the user.

Html:

<style>. text{margin:0Auto;            width:100px;            height:50px;        border:1px solid red; }    </style>"Selectcontroller"> <div ng-repeat="Pop in CityList"> <divclass="text"contenteditable="true"Ng-model="Pop.pop"></div> </div> <button ng-click="CS ()"> Output New Data </button></div></body>

However, the direct binding of Ng-model is definitely not data, then you need to add custom properties for it, as shown below.

Js:

<script>varApp = Angular.module ('app', []); App.controller ('Selectcontroller', Function ($scope) {$scope. CityList=[{id:1, Pop:"Beijing"},{id:1, Pop:"Shanghai"},{id:1, Pop:"Guangzhou"}]; $scope. P={}; $scope. CS=function () {Console.log ($scope. citylist); }}). directive ('contenteditable', function () {//The properties of the custom Ngmodel can be used in other elements such as Div        return{restrict:'A',//use as attributeRequire'? Ngmodel',//The function that this directive replaceslink:function (scope, element, Attrs, Ngmodel) {if(!Ngmodel) {                    return; } //Do nothing if no Ng-model//Specify how UI should is updatedNgmodel. $render =function () {element.html (Ngmodel. $viewValue||"');                }; //Listen for change events to enable bindingElement.on ('Blur KeyUp Change', function () {scope. $apply (Readviewtext);                }); //No need to initialize, AngularJS would initialize the text based on Ng-model attribute//Write Data to the modelfunction Readviewtext () {varHTML =element.html (); //When we clear the content editable the browser leaves a <br> behind//If STRIP-BR attribute is provided and we strip this out                    if(attrs.stripbr && html = = ='<br>') {HTML="';                } ngmodel. $setViewValue (HTML);    }            }        }; })</script>

Where the parameter categories are as follows:

Partial parameter explanation

Restrict

(string) optional parameter that indicates in what form the instruction is declared in the DOM;

The values are: E (Element), a (attribute), C (Class), M (note), where the default value is a;

E (Element):<directivename></directivename>
A (attribute): <div directivename= ' expression ' ></div>
C (Class): <div class= ' directivename ' ></div>
M (note): <--directive:directivename expression-->

2.require

The string represents the name of another instruction, which will be the fourth parameter of the link function

For specific use, we can give an example to illustrate

Let's say we're going to write two instructions, and there are many coincident methods in the link function in the two instructions (as the link function says).

At this point we can write these repeating methods in the controller of the third instruction (also referred to as the controller is often used to provide inter-instruction multiplexing behavior)

Then in these two instructions, require the command with the Controller field (the third command),

These coincident methods can then be referenced by the fourth parameter of the link linking function.

<!doctype html>

The instructions in the example above innerdirective and instructions innerDirective2 the method defined in the controller of the instruction Outerdirective.

It is further explained that the Controller in the directive is used to communicate between different instructions.

In addition, we can add one of the following prefixes to the Require parameter value, which will change the behavior of the lookup controller:

(1) without a prefix, the instruction will be found in the controller provided by itself, and if no controller is found, an error will be thrown

(2)? If the required controller is not found in the current instruction, NULL is passed to the fourth parameter of the link connection function

(3) ^ If the required controller is not found in the current instruction, the controller of the parent element is looked up

(4)? ^ combination

How to use Angularjs to make a complete table of four __ Customize the properties of the Ng-model tag to support HTML elements other than input

Related Article

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.