Home>

Sometimes we need to add ng-model to non-input type elements to achieve two-way data binding.Thereby reducing redundant code,Then you can try

For example:My page uses the contenteditable property to implement a div element that users can compile directly

html:


 <style>
    .text {
      margin:0 auto;
      width:100px;
      height:50px;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div ng-controller="selectcontroller">
  <div ng-repeat="pop in citylist">
    <div contenteditable="true" ng-model="pop.pop"></div>
  </div>
  <button ng-click="cs ()">Output new data</button>
</div>
</body>

But directly binding ng-model will definitely not get data,Then you need to add custom attributes to it,As follows.

js:


<script>
  var app=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 () {// Custom ngmodel attributes can be used in other elements such as div
    return {
      restrict:"a", // used as a property
      require:"?ngmodel", // function replaced by this directive
      link:function (scope, element, attrs, ngmodel) {
        if (! ngmodel) {
          return;
        } // do nothing if no ng-model
        // specify how ui should be updated
        ngmodel. $render=function () {
          element.html (ngmodel. $viewvalue || "");
        };
        // listen for change events to enable binding
        element.on ("blur keyup change", function () {
          scope. $apply (readviewtext);
        });
        // no need to initialize, angularjs will initialize the text based on ng-model attribute
        // write data to the model
        function readviewtext () {
          var html=element.html ();
          // when we clear the content editable the browser leaves a<br>behind
          // if strip-br attribute is provided then we strip this out
          if (attrs.stripbr&&html === "<br>") {
            html="";
          }
          ngmodel. $setviewvalue (html);
        }
      }
    };
  })
</script>

The parameter categories are as follows:

Explanation of some parameters

restrict:

(String) optional parameter,Specify the form in which the instruction is declared in the dom;

Values ​​are:e (element), a (attribute), c (class), m (comment), where the default value is a;

e (Element):<directivename></directivename>

a (attribute):<div directivename="expression"</div>

c (class):<div></div>

m (comment):<-directive:directivename expression->

2.require

The string represents the name of another instruction,It will be used as the fourth parameter of the link function

Specific usage we can give an example to illustrate

Suppose now we want to write two instructions,There are many overlapping methods in the link function of the two instructions (we will talk about the link function later).

At this time, we can write these repeated methods in the controller of the third instruction (also mentioned above that the controller is often used to provide the reuse behavior between instructions)

Then in these two instructions,require this directive with the controller field (third directive),

Finally, the fourth parameter of the link function can refer to these overlapping methods.


<! Doctype html>
<html ng-app="myapp">
<head>
 <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>
</head>
<body>
 <outer-directive>
   <inner-directive></inner-directive>
   <inner-directive2></inner-directive2>
 </outer-directive>
 <script>
  var app=angular.module ("myapp", []);
  app.directive ("outerdirective", function () {
     return {
        scope:{},        restrict:"ae",        controller:function ($scope) {
         this.say=function (somedirective) {
           console.log ("got:" + somedirective.message);
         };
        }
      };
  });
  app.directive ("innerdirective", function () {
     return {
        scope:{},        restrict:"ae",        require:"^ outerdirective",        link:function (scope, elem, attrs, controllerinstance) {
            scope.message="hi, leifeng";
            controllerinstance.say (scope);
        }
     };
  });
  app.directive ("innerdirective2", function () {
     return {
        scope:{},        restrict:"ae",        require:"^ outerdirective",        link:function (scope, elem, attrs, controllerinstance) {
            scope.message="hi, shushu";
            controllerinstance.say (scope);
        }
     };
  });
 </script>
</body>
</html>

The instruction innerdirective and instruction innerdirective2 in the above example reuse the methods defined in the controller of the instruction outerdirective

It further explains thatThe controller in the instruction is used to communicate between different instructions.

In addition, we can add one of the following prefixes to the parameter values ​​of require,This changes the behavior of the lookup controller:

(1) without a prefix,The instruction looks up in the controller provided by itself,If no controller is found,Will throw an error

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

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

(4) ^ combination

  • Previous Java database connection pool simple tutorial
  • Next Nginx method for configuring statistics traffic bandwidth request and recording real-time request status
  • Trends