Açısal 1.5 Bileşen İki Yönlü Ciltleme Çalışmıyor

Question

İki yönlü ciltleme değerlerini güncellemeyen bir Açısal 1.5.3 bileşenim var. Denetleyicim, bileşene geçirilen değerleri değiştirir.

Bileşen, denetleyici başlatıldığında varsayılan değerleri okuyor gibi görünüyor, ancak bundan sonra tek yönlü bağlı gibi davranıyor. Bileşikte, ilişkili değerlerdeki gelecekteki değişiklikler okunmaz.

Bunu benzer bir işlev yönergesinden dönüştürdüm ve iki yollu bağ çok iyi çalıştı. Üzerinde değişiklik olayı var mı yoksa benzer bir şey mi var? Bileşen denetleyicisine belirli bir mantık eklemem gerekiyor, böylece bileşen şablonu bağlı değerleri okuyabiliyor mu?

bileşeni uygular

Menü şablonu:

<div data-ng-controller="MenuCtrl as ctrl"> 
    <!-- below shows ctrl values updating when controller changes them --> 
    <pre>{{ctrl.menu}}</pre> 
    <pre>{{ctrl.settings}}</pre> 
    <!-- changes not reflected in component --> 
    <my-sub-menu menu="ctrl.menu" settings="ctrl.settings"></my-sub-menu> 
</div> 

Alt menü bileşeni:

(function() { 
'use strict'; 
angular 
    .module('myApp.components') 
    .component('mySubMenu', { 
     bindings: { 
      menu: '=', 
      settings: '=' 
     }, 
     templateUrl: 'subMenu.component.html', 
     controller: function() { 
      // implementation that reads menu and settings 
     } 
    }); 
})(); 

Basitleştirilmiş alt menü bileşeni şablonu: Sürece yok gibi

<ul> 
    <li ng-show="settings.menu1"><a href="/">Menu 1</a></li> 
    <li ng-show="settings.menu2"><a href="/">Menu 2</a></li> 
    <li ng-show="settings.menu3"><a href="/">Menu 3</a></li> 
</ul> 
<!-- changes to bound values not reflected in component template --> 
<pre>{{menu}}</pre> 
<pre>{{settings}}</pre> 

Answer 1

Bileşeniniz için controller diğer adı, varsayılan controllerAs ali kullanabilirsiniz $ctrl olarak. Bileşen tanımı nesnesinde controllerAs seçeneğiyle bunu geçersiz kılabilirsiniz.

Biçimlendirme

<ul> 
    <li ng-show="$ctrl.settings.menu1"><a href="/">Menu 1</a></li> 
    <li ng-show="$ctrl.settings.menu2"><a href="/">Menu 2</a></li> 
    <li ng-show="$ctrl.settings.menu3"><a href="/">Menu 3</a></li> 
</ul> 
<pre>{{$ctrl.menu}}</pre> 
<pre>{{$ctrl.settings}}</pre>