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: '?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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
