javascript - ejemplos - Cómo instanciar ng-controller basado en una condición
angularjs example (3)
Hice esta pregunta, pero la pregunta específica que estoy haciendo ha cambiado dramáticamente.
Tengo un pedazo de código:
<div ng-attr-controller="{{pings || ''PingsCtrl as pings'' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
Este código se inyecta en dos páginas html. Una página ya llama a PingsCtrl . El otro no lo hace. Realmente estoy intentando mantener este código seco y solo quiero tener una referencia del código anterior.
¿Cómo puedo escribir el código anterior para generar ng-controller si PingsCtrl no se ha instanciado?
Aquí están las dos páginas html.
HTML
// First page
<html ng-app="coolApp">
<div ng-controller="PingsCtrl as pings">
<div ng-attr-controller="{{pings || ''PingsCtrl as pings'' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</div>
</html>
// Second page
<html ng-app="coolApp">
<div ng-attr-controller="{{pings || ''PingsCtrl as pings'' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</html>
Javascript está aquí:
angular.module(''coolApp'', [])
.controller(''PingsCtrl'', function() {
var vm = this;
vm.press = function() {alert(123)};
})
¿Qué está mal y cómo soluciono esto?
Por favor, revise mi solución para ver cómo compartir datos entre los controladores
var app = angular.module(''myApp'', []);
app.controller("aCtrl", function ($scope, PingList) {
$scope.addPing = function() {
PingList.add(''Ping A'');
};
});
app.controller("bCtrl", function ($scope, PingList) {
$scope.addPing = function() {
PingList.add(''Ping B'');
};
});
app.factory(''PingList'', function () {
var pings = [''Ping1'', ''Ping2''];
return {
add: function(ping) {
pings.push(ping);
},
get: function () {
return pings;
}
};
});
app.directive(''pingList'', function(PingList) {
return {
restrict: ''EA'',
link: function($scope) {
$scope.pings = PingList.get();
$scope.press = function(ping) {
alert(ping);
}
},
template: ''<ul><li ng-repeat="ping in pings" ng-click="press(ping)">{{ping}}</li></ul>''
};
});
a, li {
cursor: pointer;
}
a {
color: blue;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="aCtrl" style="float: left">
<a ng-click="addPing()">click to add A ping</a>
<ping-list></ping-list>
</div>
<div ng-controller="bCtrl" style="float: right">
<a ng-click="addPing()">click to add B ping</a>
<ping-list></ping-list>
</div>
<div style="clear: both"></div>
</div>
Solo usa un servicio. Es realmente la estructura prevista para tener datos comunes y funcionalidad entre páginas.
Parte del problema con lo que estaba intentando es, ya sea que consiga o no conservar el controlador, Angular tiene su propia administración que no lo seguirá con eso y actualizará los componentes sin usted. Se encontrará con cosas como $scope que en realidad no coinciden con la página que está viendo, y termina causando más problemas de los que vale la pena.
Tengo una solución pero también me hago eco de las preocupaciones de otras personas sobre el enfoque. Es posible que desee tener un controlador global que coloque sobre el cuerpo para las cosas que pueden suceder en cualquier lugar y en la mayoría de los otros controladores, y simplemente llamar a través de eso. P.ej
<body ng-controller="GlobalCtrl as gc">
<h1 ng-click="gc.pingPress()"></h1>
</body>
De todos modos aquí es lo que se me ocurrió.
<div ng-if="pings">
<h1 ng-click="pings.press()">asdf</h1>
</div>
<div ng-if="!pings">
<div ng-controller="PingsCtrl as pings">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</div>
Esto funcionará si se coloca dentro o fuera de un PingsCtrl existente.
Aquí hay un plunker.