AngularJS: Cakupan isolasi direktif - variabel cakupan tidak ditentukan

Tolong, bisakah seseorang menjelaskan kepada saya, mengapa variabel cakupan attrDir terlihat, dan oneWay tidak? Saya pikir scope: {} juga terisolasi.

angular.module('test', []);

angular.module('test').directive('attrDir', attrDir);

function attrDir(){
    return {

        scope: true,

        link: function(scope){
          scope.hello = 'attrDir';
        }

    };
}

angular.module('test').directive('oneWay', oneWay);

function oneWay(){
    return {

        scope: {
          data: '<?'
        },

        link: function(scope){
          scope.hello = 'oneWay';  
        }

    };
}

hello hanya akan dirender di attr-dir.

<attr-dir>
  <span>{{hello}}</span>
</attr-dir>
<one-way>
  <span>{{hello}}</span>
</one-way>

Ini plunkernya: https://plnkr.co/edit/2CM4vVRshWuJvaBj2q8T?p=preview

Terima kasih.


angularjs angularjs-directive angularjs-scope
person Kindzoku    schedule 10.03.2017    source sumber
comment
Perlu dicatat bahwa tidak ada jawaban yang menjawab pertanyaan dengan benar.   -  person Estus Flask    schedule 11.03.2017
comment
Estus benar - one way !== isolated scopes.   -  person lin    schedule 11.03.2017
comment
@lin, lihat jawaban yang benar di sini   -  person Max Koretskyi    schedule 11.03.2017
comment
Kekuatannya ada pada Kindzuko sekarang.   -  person lin    schedule 11.03.2017

Jawaban (4)


arrow_upward
2
arrow_downward

Pertama, apa yang Anda amati tidak ada hubungannya dengan < pengikatan.

Masalahnya adalah ekspresi {{hello}} di dalam kedua arahan bukan bagian dari templat arahan ini. Dan untuk elemen seperti itu, aturan pengikatannya berbeda.

Angular secara otomatis membuat fungsi tautan untuk ekspresi {{hello}}. Namun cakupan evaluasi fungsi tautan ini berbeda dalam kasus Anda.

Yang mungkin Anda harapkan adalah ini:

            rootScope
         /             \
        /               \
attr-dir-new-scope  one-way-isoloate-scope
      /                   \
     /                     \
{{hello}}               {{hello}}

Namun, menurut komentar ini di sumber:

// Kita hanya meneruskan lingkup isolasi, jika direktif isolasi memiliki templat,
// jika tidak, elemen turunan tidak termasuk dalam direktif isolasi.

gambaran sebenarnya adalah ini:

             root scope
         /             \    \
        /               \    \
attr-dir-new-scope       \    one-way-isoloate-scope
      /                   \
     /                     \
{{hello}}               {{hello}}

Jadi dalam contoh Anda, direktif pertama <attr-dir> tidak membuat cakupan isolasi, tetapi membuat cakupan baru, jadi ketika menghubungkan sudut, teruskan cakupan baru ini ke fungsi penautan direktif Anda:

link: function(scope){
     scope.hello = 'attrDir';
}

dan ke fungsi penautan yang dibuat untuk ekspresi {{hello}}. Itu sebabnya ketika Anda menambahkan nilai dalam fungsi penautan, nilai tersebut tersedia di fungsi penautan ekspresi.

Namun arahan kedua Anda <one-way> menciptakan cakupan terisolasi dan menurut komentar yang saya sebutkan di atas, fungsi penautan dari arahan tersebut mendapatkan cakupan terisolasi sebagaimana mestinya, tetapi fungsi penautan dari ekspresi menerima cakupan berbeda (cakupan root dalam contoh Anda). Jadi, Anda menambahkan nilai hello pada cakupan yang berbeda. Itu sebabnya nilainya tidak terdefinisi.

person Max Koretskyi    schedule 11.03.2017
comment
Bisakah Anda menunjukkan kepada kami bagaimana asumsi arahan <one-way Anda mengimplementasikan isolate scope menggunakan <? - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, >? tidak mengimplementasikan cakupan isolasi, cakupan terisolasi diimplementasikan dengan menentukan objek untuk properti scope dalam objek definisi direktif - person Max Koretskyi; 11.03.2017
comment
Jika demikian, apa maksudnya <?? - person Gangadhar JANNU; 11.03.2017
comment
BTW itu bukan >?, OP mencoba <? di arahannya - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, saya tidak punya waktu sekarang. Buat pertanyaan dan saya akan memberikan jawabannya di sana nanti. Ini <, lihat di sini di ekspresi reguler ini @&<. ? hanya mengatakan bahwa itu opsional - person Max Koretskyi; 11.03.2017
comment
@Maksimum Saya tahu apa artinya ?. Kami tidak dapat berasumsi apa yang ada di sumber sudut, namun kami menjawab apa yang ditanyakan OP. Yang dimaksud adalah data: '<?' - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, saya tidak sengaja menggunakan >? dalam komentar saya. Tidak ada ikatan seperti itu - person Max Koretskyi; 11.03.2017
comment
Saya tahu tidak ada yang seperti >? - person Gangadhar JANNU; 11.03.2017

arrow_upward
0
arrow_downward

Baik scope: true dan scope:{} akan membuat cakupan anak untuk direktif tersebut. Tetapi,

scope:true secara prototipikal akan mewarisi properti dari induknya (katakanlah pengontrol tempat direktif berada) sedangkan asscope:{} tidak akan mewarisi properti dari induknya dan karenanya disebut terisolasi

Karena oneWay adalah arahan cakupan terisolasi dan Anda tidak meneruskan hello, maka itu tidak terdefinisi dalam HTML.

person Pankaj Kumar Singh    schedule 11.03.2017

arrow_upward
0
arrow_downward

Jika cakupannya tidak ditentukan, maka itu adalah cakupan bersama. Jika cakupan ditentukan sebagai benar, maka itu adalah cakupan yang diwariskan. Jika ruang lingkup ditentukan dengan kurung kurawal, itu adalah ruang lingkup isolasi.

Cara terbaik untuk memvisualisasikan cakupannya adalah dengan menggunakan pernyataan console.log di fungsi tautan Anda seperti,

link: function(scope) {          
      scope.hello = 'attrDir';
      console.log('scope in attrDir: ', scope);
    }

    link: function(scope) {          
          scope.hello = 'oneWay';
          console.log('scope in oneWay: ', scope);
        }

Jika Anda membuka alat pengembang, Anda akan melihat bahwa arahan pertama mewarisi cakupan induknya dalam prototipenya

__proto__:Scope

sedangkan yang kedua adalah objek dengan cakupannya sendiri (dengan menggunakan kurung kurawal Anda memberinya cakupan isolasi)

__proto__:Object
person Latin Warrior    schedule 11.03.2017

arrow_upward
-2
arrow_downward

Karena Anda menerapkan pengikatan komponen dalam arahan.

Simbol ‹ menunjukkan pengikatan satu arah yang tersedia sejak 1.5.

Jika Anda ingin menampilkan komponen hello di one-way Anda harus mengubah implementasinya seperti di bawah ini:

HTML

 <one-way hello="$ctrl.hello">
      <span>{{$ctrl.hello}}</span>
    </one-way>

JS

angular.module('test').component('oneWay', {
  bindings:{
    hello:'='
  },
  controller: function() {
    this.hello = 'oneWay';
  }
});

Demo

plnkr

person Gangadhar JANNU    schedule 11.03.2017
comment
Jadi, maksud Anda directive menggunakan < menjadi komponen tersembunyi? - person Kindzoku; 11.03.2017
comment
@Kindzoku. Saya mengatakan tidak ada yang seperti < yang mengikat dalam arahan. Jika Anda ingin menggunakannya, Anda harus menggunakannya di component yang diperkenalkan di sudut 1.5 - person Gangadhar JANNU; 11.03.2017
comment
Bagaimana ini menjawab pertanyaan tersebut? Bahkan jika tidak ada data: '<?' yang mengikat, itu akan tetap sama. - person Estus Flask; 11.03.2017
comment
@estus. OP mencoba menggunakan < yang tidak disajikan dalam arahan arahan. jadi saya menyarankan dia untuk menggunakan komponen jika dia ingin mengimplementasikan < binding - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, jawaban Anda salah. lihat jawaban yang benar di sini - person Max Koretskyi; 11.03.2017
comment
@Kindzoku, silakan lihat jawaban yang benar di sini - person Max Koretskyi; 11.03.2017
comment
@Maximus Anda mungkin menjelaskan konsep tersebut dalam konteks lain. Hanya karena Anda menjelaskan dengan cara berbeda bukan berarti jawaban lain salah. OP bertanya mengapa variabel cakupan attrDir terlihat, dan oneWay tidak? dan saya menjelaskan dalam konteks pengikatan komponen sudut 1,5. Karena OP menggunakan < di direktif yang tidak semuanya ada, saya menyarankan dia untuk menggunakan <. - person Gangadhar JANNU; 11.03.2017
comment
@semua sebelum memilih, sebutkan saja konteks Anda sehingga saya akan memeriksanya - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, angular 1.5 component bindings diterapkan ke templat arahan, dan tidak ada arahan dalam kasus OP yang menggunakan templat. Selain itu, simbol < juga digunakan untuk arahan, karena komponen adalah arahan di bawah tenda. Dan ketiga, OP menggunakan versi 1.5 dalam contohnya - person Max Koretskyi; 11.03.2017
comment
Jika itu penyebabnya, bisakah Anda menunjukkan kepada saya bagaimana kita dapat menerapkan < dalam arahan karena saya benar-benar tidak yakin tentang itu - person Gangadhar JANNU; 11.03.2017
comment
@GangadharJannu, periksa plunker ini untuk melihat < digunakan dalam arahan. Anda juga dapat melihat di sini komponen itu hanyalah arahan mewah. - person Max Koretskyi; 11.03.2017