attributs personnalisés angulairejs de ng-model tag

attributs personnalisés angulairejs de ng-model tag_AngularJS

WBOY

Libérer： 2016-05-16 15:19:03

original

1342 Les gens l'ont consulté

Parfois, nous devons ajouter ng-model à des éléments de type non-input pour obtenir une liaison de données bidirectionnelle, réduisant ainsi le code redondant, vous pouvez alors essayer cette méthode

Par exemple : j'utilise l'attribut contenteditable dans ma page pour implémenter des éléments div qui peuvent être directement compilés par les utilisateurs

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 class="text" contenteditable="true" ng-model="pop.pop"></div>
  </div>
  <button ng-click="cs()">输出新数据</button>
</div>
</body>

Copier après la connexion

Mais si vous liez directement ng-model, vous n'obtiendrez certainement pas les données. Dans ce cas, vous devez y ajouter des attributs personnalisés, comme indiqué ci-dessous.

js :

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.p={};
    $scope.cs=function(){
      console.log($scope.citylist);
    }
  }).directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中
    return {
      restrict: 'A', // 作为属性使用
      require: '&#63;ngModel', // 此指令所代替的函数
      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>

Copier après la connexion

Les catégories de paramètres sont les suivantes :

Explication de certains paramètres

restreindre :

(string) paramètre facultatif, indiquant comment l'instruction est déclarée dans le DOM

;

Les valeurs sont : E (élément), A (attribut), C (classe), M (commentaire), où la valeur par défaut est A

E (élément) :
A (attribut) :

C (Classe) :

M (commentaire) : <--directive:directiveName expression-->

2.exiger

La chaîne représente le nom d'une autre commande, qui sera utilisée comme quatrième paramètre de la fonction de lien

Nous pouvons donner un exemple pour illustrer l'utilisation spécifique

Supposons maintenant que nous voulions écrire deux instructions. Il existe de nombreuses méthodes qui se chevauchent dans la fonction de lien des deux instructions (la fonction de lien sera discutée plus tard),

À l'heure actuelle, nous pouvons écrire ces méthodes répétées dans le contrôleur de la troisième instruction (comme mentionné ci-dessus, le contrôleur est souvent utilisé pour fournir un comportement de réutilisation entre les instructions)

Puis dans ces deux instructions, exiger l'instruction avec le champ du contrôleur (la troisième instruction),

Enfin, ces méthodes qui se chevauchent peuvent être référencées via le quatrième paramètre de la fonction de lien.

<!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>

Copier après la connexion

Les instructions innerDirective et innerDirective2 dans l'exemple ci-dessus réutilisent la méthode définie dans le contrôleur de l'instruction externalDirective

explique également en outre que le contrôleur dans l'instruction est utilisé pour communiquer entre différentes instructions.

De plus, nous pouvons ajouter l'un des préfixes suivants à la valeur du paramètre require, ce qui modifiera le comportement du contrôleur de recherche :

(1) Sans préfixe, l'instruction recherchera dans le contrôleur fourni par elle-même. Si aucun contrôleur n'est trouvé, une erreur sera générée

(2) ? Si le contrôleur requis n'est pas trouvé dans l'instruction en cours, null sera passé au quatrième paramètre de la fonction de connexion de lien

(3)^Si le contrôleur requis n'est pas trouvé dans la directive actuelle, le contrôleur de l'élément parent sera recherché

(4) ?^ Combinaison