javascript - route - routing angular 1
AngularJS-elementos de acceso fuera de ng-view (3)
Tengo una configuración con una vista ng (un panel de administración) que me permite mostrar pedidos. Tengo un cuadro de búsqueda fuera de ng-view que me gustaría usar para modificar mi solicitud json. He visto algunas publicaciones sobre el acceso a cosas como el título, pero no pude hacer que funcionen, quizás desactualizado.
Cosas de la aplicación principal:
angular.module(''myApp'', [''myApp.controllers'', ''myApp.filters'', ''myApp.services'', ''myApp.directives'', ''ui.bootstrap'']).
config([''$routeProvider'', ''$locationProvider'', function($routeProvider, $locationProvider) {
$routeProvider.
when(''/'', {
templateUrl: ''/partials/order/manage.html'',
controller: ''ManageOrderCtrl''
}).
when(''/order/:id'', {
templateUrl: ''/partials/order/view.html'',
controller: ''ViewOrderCtrl''
}).
otherwise({
redirectTo: ''/''
});
$locationProvider.html5Mode(true);
}]);
Administrar el controlador:
angular.module(''myApp.controllers'', [])
.controller(''ManageOrderCtrl'', [''$scope'', ''$http'', ''$dialog'', ''config'', ''Page'', function($scope, $http, $dialog, config, Page) {
// would like to have search value from input #search available here
var getData = function() {
$http.get(''/orders'').
success(function(data, status, headers, config) {
$scope.orders = data.orders;
});
};
getData();
})
Ver:
<body ng-app="myApp" >
<input type="text" id="search">
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
Prueba esto...
Ver:
<body ng-app="myApp" >
<input type="text" id="search" ng-model="searchQuery" />
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
Usándolo en tu controlador:
$http.get(''/orders?query='' + $scope.searchQuery).
success(function(data, status, headers, config) {
$scope.orders = data.orders;
});
Básicamente, puedes hacer eso con cualquier cosa DENTRO de la aplicación ng ... ¡Mueve tu aplicación ng a la etiqueta html y puedes editar el title también!
Puede utilizar jerarquías de alcance .
Agregue una definición de ng-controller "externa" a su HTML de esta manera:
<body ng-controller="MainCtrl">
Se convertirá en el ámbito de los $ padres. Pero no es necesario compartir datos mediante un servicio. Ni siquiera necesita usar el $scope.$parent . Puede utilizar jerarquías de alcance . (Vea la sección de Jerarquías de alcance en esa página). Es realmente facil
En tu MainCtrl , puedes tener esto:
$scope.userName = "Aziz";
Entonces, en cualquier controlador que esté anidado dentro de MainCtrl (y no anule el nombre de usuario en su propio ámbito) ¡también tendrá el nombre de usuario! Puedes usar en la vista con {{userName}}.
Si vas a acceder a cosas fuera de <div ng-view></div> , creo que un mejor enfoque sería crear un controlador para la región externa también. Luego creas un servicio para compartir datos entre los controladores:
<body ng-app="myApp" >
<div ng-controller="MainCtrl">
<input type="text" id="search">
</div>
<div class="ng-cloak" >
<div ng-view></div>
</div>
</body>
( ng-controller="MainCtrl" también se puede colocar en la etiqueta <body> - entonces el alcance ng-view $ sería un elemento secundario del alcance MainCtrl $ en lugar de un hermano).
Crear el servicio es tan simple como esto:
app.factory(''Search'',function(){
return {text:''''};
});
Y es inyectable así:
app.controller(''ManageOrderCtrl'', function($scope,Search) {
$scope.searchFromService = Search;
});
app.controller(''MainCtrl'',function($scope,Search){
$scope.search = Search;
});
De esta manera, no tiene que confiar en compartir datos a través del $ rootScope global (que es un poco como confiar en variables globales en javascript, una mala idea por todo tipo de razones) o en un alcance de $ parent que puede ser o no presente.
He creado un plnkr que intenta mostrar la diferencia entre las dos soluciones.