atribut tersuai angularjs bagi ng-model tag_AngularJS-tutorial js-php.cn

atribut tersuai angularjs bagi ng-model tag_AngularJS

WBOY

Lepaskan： 2016-05-16 15:19:03

asal

1347 orang telah melayarinya

Kadangkala kita perlu menambah model ng pada elemen jenis bukan input untuk mencapai pengikatan data dua hala, dengan itu mengurangkan kod berlebihan, kemudian anda boleh mencuba kaedah ini

Contohnya: Saya menggunakan atribut contenteditable dalam halaman saya untuk melaksanakan elemen div yang boleh disusun terus oleh pengguna

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>

Salin selepas log masuk

Tetapi jika anda mengikat model ng secara langsung, anda pasti tidak akan mendapat data Dalam kes ini, anda perlu menambah atribut tersuai padanya, seperti yang ditunjukkan di bawah.

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>

Salin selepas log masuk

Kategori parameter adalah seperti berikut:

Penjelasan beberapa parameter

sekat:

(rentetan) parameter pilihan, menunjukkan cara arahan diisytiharkan dalam DOM;

Nilainya ialah: E (elemen), A (atribut), C (kelas), M (komen), dengan nilai lalai ialah A;

E (elemen):

A (atribut):

C (Kelas):

M (komen): <--directive:directiveName ungkapan-->

2.memerlukan

Rentetan mewakili nama perintah lain, yang akan digunakan sebagai parameter keempat fungsi pautan

Kami boleh memberi contoh untuk menggambarkan penggunaan khusus

Katakan sekarang kita ingin menulis dua arahan Terdapat banyak kaedah bertindih dalam fungsi pautan dua arahan (fungsi pautan akan dibincangkan kemudian),

Pada masa ini kita boleh menulis kaedah berulang ini dalam pengawal arahan ketiga (seperti yang dinyatakan di atas, pengawal sering digunakan untuk menyediakan tingkah laku guna semula antara arahan)

Kemudian dalam dua arahan ini, perlukan arahan dengan medan pengawal (arahan ketiga),

Akhir sekali, kaedah bertindih ini boleh dirujuk melalui parameter keempat fungsi pautan.

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

Salin selepas log masuk

Arahan innerDirective dan innerDirective2 dalam contoh di atas menggunakan semula kaedah yang ditakrifkan dalam pengawal arahan outerDirective

juga menerangkan dengan lebih lanjut bahawa pengawal dalam arahan digunakan untuk berkomunikasi antara arahan yang berbeza.

Selain itu, kami boleh menambah salah satu awalan berikut pada nilai parameter yang diperlukan, yang akan mengubah tingkah laku pengawal carian:

(1) Tanpa awalan, arahan akan mencari dalam pengawal yang disediakan dengan sendirinya Jika tiada pengawal ditemui, ralat akan dilemparkan

(2)? Jika pengawal yang diperlukan tidak ditemui dalam arahan semasa, null akan dihantar ke parameter keempat fungsi sambungan pautan

(3)^Jika pengawal yang diperlukan tidak ditemui dalam arahan semasa, pengawal elemen induk akan dicari

(4)?^ Gabungan