Angularjs bidirectional binding is very useful in development, but since Ng-model can only be hung on input, we need to customize the Ng-model to use this tag on elements such as Div.
Custom directives:
1 //customizing the properties of a Ngmodel2. directive (' contenteditable ', [' $window ',function() {3 return {4Restrict: ' A ',5Require: '? Ngmodel ',//The function that this directive replaces6Linkfunction(scope, element, Attrs, Ngmodel) {7 if(!Ngmodel) {8 return;9}//Do nothing if no Ng-modelTen //Specify how UI should is updated OneNgmodel. $render =function() { AElement.html (ngmodel. $viewValue | | ‘‘); - }; - //Listen for change events to enable binding theElement.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 model - functionReadviewtext () { + varHTML =element.html (); A //When we clear the content editable the browser leaves a <br> behind at //If STRIP-BR attribute is provided and we strip this out - if(attrs.stripbr && html = = = ' <br> ')) { -html = ' '; - } - Ngmodel. $setViewValue (HTML); - } in } - } to}])
The div in the page can use Ng-model like this:
1 contenteditable= "true" ng-model= "param. Mobilenum "style=" right:15px; " ></div>
Two-way binding can be used.
Topsy angularjs--through custom Ng-model, not just input can have two-way bindings