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