Rumah > Artikel > hujung hadapan web > atribut tersuai angularjs bagi ng-model tag_AngularJS

atribut tersuai angularjs bagi ng-model tag_AngularJS

WBOYasal: 2016-05-16 15:19:031316semak imbas

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>

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>

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): 3d2e5ffc584136bb402056fc25c74042fd34349817ec1e88fe5ef4ceedb13309

A (atribut):6eac651395124439dad6853c8943e57316b28748ea4df4d9c2150843fecfba68

C (Kelas): c9319480cb6dde66254d6e5a18255f6c16b28748ea4df4d9c2150843fecfba68
M (komen): 2e0c811c1cfc02c29f706a4b83403625

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：pemalam putaran imej jQuery contoh penggunaan jQueryRotate.js (dengan muat turun demo)_jqueryArtikel seterusnya：pemalam putaran imej jQuery contoh penggunaan jQueryRotate.js (dengan muat turun demo)_jquery

Artikel berkaitan

Lihat lagi