Saya mencoba membuat arahan yang akan membuat bidang input dengan model-ng yang sama dengan elemen yang membuat arahan.
Inilah yang saya buat sejauh ini:
HTML
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This scope value <input ng-model="name">
<my-directive ng-model="name"></my-directive>
</body>
</html>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Felipe";
});
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
scope: {
ngModel: '='
},
template: '<div class="some"><label for="{{id}}">{{label}}</label>' +
'<input id="{{id}}" ng-model="value"></div>',
replace: true,
require: 'ngModel',
link: function($scope, elem, attr, ctrl) {
$scope.label = attr.ngModel;
$scope.id = attr.ngModel;
console.debug(attr.ngModel);
console.debug($scope.$parent.$eval(attr.ngModel));
var textField = $('input', elem).
attr('ng-model', attr.ngModel).
val($scope.$parent.$eval(attr.ngModel));
$compile(textField)($scope.$parent);
}
};
});
Namun, saya tidak yakin ini adalah cara yang tepat untuk menangani skenario ini, dan ada bug yang kontrol saya tidak diinisialisasi dengan nilai bidang target ng-model.
Berikut adalah Plunker dari kode di atas: http://plnkr.co/edit/IvrDbJ
Apa cara penanganan yang benar?
EDIT : Setelah menghapus ng-model="value"
dari templat, ini tampaknya berfungsi dengan baik. Namun, saya akan tetap membuka pertanyaan ini karena saya ingin memeriksa ulang apakah ini cara yang tepat untuk melakukan ini.
scope
dan mengaturnyascope: false
? Bagaimana cara mengikatng-model
dalam kasus itu?Jawaban:
EDIT : Jawaban ini sudah tua dan kemungkinan kedaluwarsa. Hanya kepala sehingga tidak membuat orang tersesat. Saya tidak lagi menggunakan Angular jadi saya tidak dalam posisi yang baik untuk melakukan perbaikan.
Ini sebenarnya logika yang cukup bagus tetapi Anda dapat menyederhanakan banyak hal.
Pengarahan
Html dengan arahan
CSS
Anda dapat melihatnya beraksi dengan Plunker ini .
Inilah yang saya lihat:
EDIT Seperti yang disebutkan oleh Mark dalam komentarnya, tidak ada alasan bahwa Anda tidak dapat menggunakan ng-model, hanya untuk mengikuti konvensi.
Secara umum, arahan Anda harus menggunakan lingkup terisolasi (yang Anda lakukan dengan benar) dan menggunakan lingkup tipe '=' jika Anda ingin nilai dalam arahan Anda untuk selalu memetakan ke nilai dalam lingkup induk.
sumber
contenteditable
contoh arahan dalam Angular docs - halaman formulir , halaman NgModelController - keduanya menggunakan ng-model. Dan halaman ngModelController mengatakan bahwa pengontrol ini "dimaksudkan untuk diperluas oleh arahan lain."hg-model
(dan bukan masalah kopling, IMO). Dengan cara ini konteks data selalu menggunakan ng-model apakah itu adalah<input>
atau direktif kustom, sehingga menyederhanakan overhead kognitif untuk penulis HTML. Yaitu menghemat penulis HTML harus mencari tahu apa namamy-directive-var
untuk setiap arahan, terutama karena tidak ada pelengkapan otomatis untuk membantu Anda.ng-model-options
atau semua model lainnya, bukan?Saya mengambil kombinasi dari semua jawaban, dan sekarang memiliki dua cara untuk melakukan ini dengan atribut ng-model:
Tampilkan cuplikan kode
Saya tidak yakin saya suka kompilasi saat tautan. Namun, jika Anda hanya mengganti elemen dengan yang lain Anda tidak perlu melakukan itu.
Secara keseluruhan, saya lebih suka yang pertama. Cukup setel cakupan ke
{ngModel:"="}
dan atur ding-model="ngModel"
mana Anda inginkan dalam template Anda.Pembaruan : Saya menyisipkan potongan kode dan memperbaruinya untuk Angular v1.2. Ternyata ruang lingkup isolasi masih terbaik, terutama ketika tidak menggunakan jQuery. Jadi intinya adalah:
Apakah Anda mengganti satu elemen: Ganti saja, biarkan ruang lingkupnya saja, tetapi perhatikan bahwa ganti tidak digunakan untuk v2.0:
Kalau tidak gunakan ini:
sumber
ng-model
dalam ruang lingkup yang terisolasi?tidak begitu rumit: dalam perintah Anda, gunakan alias:
scope:{alias:'=ngModel'}
di html Anda, gunakan seperti biasa
sumber
Anda hanya perlu ng-model ketika Anda perlu mengakses $ viewValue atau $ modelValue model. Lihat NgModelController . Dan dalam hal ini, Anda akan menggunakannya
require: '^ngModel'
.Untuk selebihnya, lihat jawaban Roys .
sumber
^
harus ada hanya jika model-ng diterapkan dalam elemen indukIni adalah jawaban yang sedikit terlambat, tapi saya menemukan mengagumkan ini posting tentang
NgModelController
, yang saya pikir adalah apa yang Anda cari.TL; DR - Anda dapat menggunakan
require: 'ngModel'
dan kemudian menambahkanNgModelController
ke fungsi penautan Anda:Dengan cara ini, tidak perlu diretas - Anda menggunakan bawaan Angular
ng-model
sumber
Saya tidak akan mengatur ngmodel melalui atribut, Anda dapat menentukannya dengan benar di template:
plunker : http://plnkr.co/edit/9vtmnw?p=preview
sumber
Karena Angular 1.5 dimungkinkan untuk menggunakan Komponen. Komponen adalah cara untuk pergi dan menyelesaikan masalah ini dengan mudah.
Di dalam YourController, yang perlu Anda lakukan adalah:
sumber
input ng-model="$ctrl.ngModel"
dan akan disinkronkan dengan $ ctrl.result juga.Membuat ruang lingkup isolat tidak diinginkan. Saya akan menghindari menggunakan atribut lingkup dan melakukan sesuatu seperti ini. scope: true memberi Anda lingkup anak baru tetapi tidak mengisolasi. Kemudian gunakan parse untuk mengarahkan variabel lingkup lokal ke objek yang sama yang telah disediakan pengguna ke atribut ngModel.
sumber