angularjs - parameter - Parte variable entre componentes angulares 1.5

scope directive angularjs

Question

Tengo una configuración de componentes angulares como esta:

(function(angular) {
''use strict'';
angular.module(''bar'', [])
angular.module(''bar'').component(''bar'', {
template: ''<h1 ng-show="showMe">It worked</h1>'',
bindings: {
showMe: ''=''
}
});
})(window.angular);

y otra configuración como esta

(function(angular) {
''use strict'';
angular.module(''foo'', [])
angular.module(''foo'').component(''foo'', {
template: ''<button ng-click="showMe = true">Click Me</button>'' +
''<bar showMe = "showMe"></bar>''
});
})(window.angular);

mi index.html

<foo>Hello Plunker!</foo>

Pero no puedo hacer que la plantilla en la barra funcione. ¿Qué me estoy perdiendo?

Tengo un plunkr aquí: https://plnkr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview

Answer 1

Sospecho que estás luchando contra el hecho de que los ámbitos de los componentes siempre están aislados (por lo que el acceso al alcance principal solo existe si declaras el enlace)

Sospecho que tu código debería verse así:

<foo newPopup="''something''">
<!-- bar inside foo''s template -->
<bar newPopup="$ctrl.newPopup"></bar>
<!-- end foo''s template -->
</foo>

Las directivas dan acceso al alcance padre de forma predeterminada, lo que podría explicar por qué funciona como una directiva para usted en el componente interno (barra probablemente) tendría acceso al $ ctrl padre (ya que las directivas tampoco configuran las controladoras de forma predeterminada).

EDITAR: Sigo pensando que mi respuesta original es verdadera y que con las directivas esto funcionaba sin que se alcanzara el alcance. Hay un par de otras correcciones (2 y tres a continuación) en el plnkr, que supongo que no están relacionadas con el problema original, porque si lo fueran no puedo imaginar que hubiera funcionado como una directiva tampoco.

Hacer los siguientes cambios debería hacer que tu trabajo sucio:

1. Siempre que se refiera a una variable de ámbito en un componente, póngala a prefijo $ ctrl (o lo que sea que el valor de su controlador sea para ese componente $ ctrl es el valor predeterminado en un componente donde no tener la sintaxis de controllerAs es el predeterminado para las directivas).
2. Haga que el módulo foo dependa de la barra (la está consumiendo, por lo que debe depender de ella)
3. Cuando consulte los valores del alcance de camelBack (para las directivas) o vinculante (para los componentes) en la plantilla, cambie las mayúsculas a minúsculas y agregue un guión (por ejemplo, camelBack -> camel-back)

https://plnkr.co/edit/ka2owI?p=preview

foo.js

(function(angular) {
''use strict'';
angular.module(''foo'', [''bar''])
angular.module(''foo'').component(''foo'', {
template: ''<button ng-click="$ctrl.showMe = true">Click Me</button>'' +
''<bar show-me = "$ctrl.showMe"></bar>''
});
})(window.angular);

bar.js

(function(angular) {
''use strict'';
angular.module(''bar'', [])
angular.module(''bar'').component(''bar'', {
template: ''<h1 ng-show="$ctrl.showMe">It worked</h1>'',
bindings: {
showMe: ''=''
}
});
})(window.angular);

Para mayor claridad (porque $ ctrl se usa dos veces más arriba y en el plunk haciendo que su uso parezca ambiguo), puede tener valores separados de controlador como aquí y foo no debería ser accesible en la barra. foo.js y bar.js podrían ser razonablemente los siguientes y esto funcionaría:

foo.js

(function(angular) {
''use strict'';
angular.module(''foo'', [''bar''])
angular.module(''foo'').component(''foo'', {
controllerAs: ''fooCtrl'',
template: ''<button ng-click="fooCtrl.showMe = true">Click Me</button>'' +
''<bar show-me = "fooCtrl.showMe"></bar>''
});
})(window.angular);

bar.js

(function(angular) {
''use strict'';
angular.module(''bar'', [])
angular.module(''bar'').component(''bar'', {
controllerAs: ''barCtrl'',
template: ''<h1 ng-show="barCtrl.showMe">It worked</h1>'',
bindings: {
showMe: ''=''
}
});
})(window.angular);