Pregunta Angular 1.5 componente de dos vías de unión no funciona


Tengo un componente Angular 1.5.3 que parece no actualizar los valores para un enlace bidireccional. Mi controlador cambia los valores que se pasan al componente.

El componente parece leer los valores predeterminados cuando se inicializa el controlador, pero a partir de entonces actúa como si estuviera vinculado de una manera. Cualquier cambio futuro en los valores ligados no se lee en el componente.

Convertí esto de una directiva funcional similar y el enlace bidireccional funcionó bien. ¿Hay algún evento de cambio, o algo similar, que me falten para los componentes? ¿Debo agregar una lógica específica al controlador del componente para que la plantilla del componente pueda leer los valores encuadernados?

Plantilla de menú que implementa el componente:

<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>

Componente del submenú:

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

Plantilla simplificada del componente del submenú:

<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>

9
2018-04-01 15:50


origen


Respuestas:


Mientras no tengas controller alias para su componente, puede usar el valor predeterminado controllerAs alias como $ctrl. Puede anularlo teniendo controllerAs opción en objeto de definición de componente.

Margen

<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>

9
2018-04-01 15:59