javascript - escape - ng-bind-html angular 6
AngularJS: ng-include y ng-controller (3)
Tengo una aplicación que estoy creando con angular, tengo alrededor de 8-10 vistas para construir. Todas las vistas tienen un pie de página compartido, basado en la vista y un conjunto de reglas empresariales que necesito para mostrar / ocultar parte del contenido en el pie de página.
Asi que. Tengo controladores para cada vista, y luego uno para el pie de página. Incluyo el diseño de pie de página común usando ng-include, donde el html que estoy incluyendo hace referencia al controlador de pie de página en el controlador ng.
Index.html
<body ng-controller="MainCtrl as vm">
<p>Message from Main Controller ''{{vm.mainMessage}}''</p>
<div ng-include="''commonFooter.html''"></div>
</body>
commonFooter.html
<div ng-controller="FooterCtrl as vm">
<p>Message from Footer Controller ''{{vm.message}}''</p>
<p ng-show="vm.showSomthing">Conditional footer Content</p>
</div>
Quiero que cada controlador de vistas determine el estado del pie de página y si el contenido específico está oculto o no. (debería mostrarse a continuación)
app.controller(''MainCtrl'', function($scope) {
var vm = this;
vm.mainMessage= ''HEELO'';
vm.shouldDisplaySomthingInFooter = true;
window.console.log(''Main scope id: '' + $scope.$id);
});
Luego pretendí que en el Controlador de pie volviera al controlador principal y extrajera la configuración específica para habilitar / deshabilitar el contenido según las reglas comerciales.
app.controller(''FooterCtrl'', function($scope) {
var vm = this;
vm.message = ''vm footer'';
window.console.log(''Footer scope id: '' + $scope.$id);
window.console.log(''Footer parent scope id: '' + $scope.$parent.$id);
window.console.log(''Footer grandparent scope id: '' + $scope.$parent.$parent.$id);
window.console.log(''Footer grandparent scope name: '' + $scope.$parent.$parent.mainMessage);
window.console.log(''Footer grandparent scope condition: '' + $scope.$parent.$parent.shouldDisplaySomthingInFooter);
vm.showSomthing = false; //how to pull from parent scope to bind the ng-show to a value set in the parent from within a ng-include?
});
Tengo este ejemplo aquí: http://plnkr.co/edit/ucI5Cu4jjPgZNUitY2w0?p=preview
Lo que estoy descubriendo es que cuando entro al ámbito principal para extraer el contenido, vuelve a estar indefinido y no estoy seguro de por qué.
Puedo ver que los ámbitos están anidados al nivel de abuelos al verificar el ID de alcance, creo que esto se debe a que ng-include agrega una capa de ámbito adicional debajo de los ámbitos de vista.
Puntos extra: si no puedo tener que usar el objeto $ scope y puedo mantener el var vm = this; Manera de hacerlo que sería preferible. Pero los mendigos no pueden ser escogedores :)
app.controller(''MainCtrl'', function($scope) {
var vm = this;
Muchas gracias por adelantado.
Ha entendido mal para qué se usa el controlador como sintaxis ( consulte la documentación ). Es solo una forma de exponer un controlador en particular en su ámbito local, para que pueda acceder a sus propiedades desde una plantilla. Cuando usa someController as vm tanto en su plantilla someController as vm en su pie de página, de alguna manera no crea una conexión entre los controladores ni nada de eso. Solo está configurando una propiedad vm en el alcance de su pie de página, de modo que cuando la usa en su plantilla de pie de página, accede al controlador del pie de página (y ha bloqueado su camino hacia el controlador principal).
Para lo que intenta hacer, básicamente no necesita el controlador como sintaxis. Simplemente coloque sus datos en $scope y deje que la jerarquía de alcance haga el resto por usted.
En su controlador principal:
$scope.features.rock = true;
$scope.features.roll = false;
En tu plantilla de pie de página
<p ng-show="features.rock">...</p>
<p ng-show="features.roll">...</p>
Ahora también puede ver y cambiar las features de sus otros controladores (ya que sus ámbitos son descendientes del alcance del controlador principal).
Jugué con tu plunker, pero también cambié var vm = this; a $scope , así que estoy fallando en puntos extra :-)
Recomendaría encarecidamente que no se use $scope.$parent exactamente por el motivo que se muestra. Varias directivas como ng-include , ng-show , etc., generan sus propios ámbitos.
No tiene control si alguien en el futuro cambia su html y agrega ámbitos, intencionalmente o de otra manera.
Recomiendo usar funciones que residan en su MainCtrl y acceder a ellas a través de ámbitos hereditarios.
$scope.getShouldShow = function() {
return $scope.shouldDisplaySomthingInFooter;
};
$scope.setShouldShow = function(val) {
$scope.shouldDisplaySomthingInFooter = val;
};
$scope.getMainMessage = function () {
return $scope.mainMessage;
}
Y llamándolos:
<p ng-show="getShouldShow();">Conditional footer Content</p>
Y:
window.console.log(''Footer grandparent scope name: '' + $scope.getMainMessage());
window.console.log(''Footer grandparent scope condition: '' + $scope.getShouldShow());
Si utiliza el controlador externo como vm y el controlador interno como foo , puede separarlos fácilmente y consultar vm dentro del controlador interno.
HTML :
<body ng-controller="MainCtrl as vm">
<p>Message from Main Controller ''{{vm.mainMessage}}''</p>
<div ng-include="''commonFooter.html''"></div>
</body>
CommonFooter.html :
<div ng-controller="FooterCtrl as footer">
<p>Message from Footer Controller ''{{footer.message}}''</p>
<p ng-show="vm.shouldDisplaySomethingInFooter">Conditional footer Content</p>
</div>
app.js :
var app = angular.module(''plunker'', []);
app.controller(''MainCtrl'', function() {
var self = this;
self.mainMessage = ''Hello world'';
self.shouldDisplaySomethingInFooter = true;
});
app.controller(''FooterCtrl'', function() {
var self = this;
self.message = ''vm footer'';
});
Nota: Cambié el nombre de var vm = this a var self = this para mayor claridad y para reducir la confusión entre sus vistas y sus controladores.
Rendimiento esperado: