AngularJS - elementi di accesso esterni alla vista ng

Ho un setup con una ng-view (un pannello di amministrazione) che mi consente di visualizzare gli ordini. Ho una casella di ricerca al di fuori di ng-view che vorrei usare per modificare la mia richiesta json. Ho visto alcuni post sull'accesso a cose come il titolo ma non sono riuscito a farli funzionare - forse obsoleti.AngularJS - elementi di accesso esterni alla vista ng

principale roba app:

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); 
}]);

Gestire regolatore:

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(); 
})

Vista:

<body ng-app="myApp" > 
    <input type="text" id="search"> 
    <div class="ng-cloak" > 
    <div ng-view></div> 
    </div> 
</body>

fonte

2013-04-16 cyberwombat

hai provato $ rootScope –

Se si accede a materiale esterno allo <div ng-view></div>, penso che un approccio migliore sarebbe quello di creare un controller per l'area esterna. Quindi si crea un servizio di condividere i dati tra i controllori:

<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" può essere posizionato anche sul cartellino <body> - allora il ng-view $ portata sarebbe un figlio della MainCtrl $ portata al posto di un fratello .)

Creare il servizio è semplice come questo:

app.factory('Search',function(){ 
    return {text:''}; 
});

Ed è iniettabile in questo modo:

app.controller('ManageOrderCtrl', function($scope,Search) { 
    $scope.searchFromService = Search; 
}); 

app.controller('MainCtrl',function($scope,Search){ 
    $scope.search = Search; 
});

In questo modo non è necessario fare affidamento sulla condivisione dei dati tramite il rootScope globale (che è un po 'come affidarsi a variabili globali in javascript - una cattiva idea per tutti i tipi di ragioni) o attraverso un ambito $ genitore che può o potrebbe non essere presente

Ho creato un plnkr that tries to show the difference tra le due soluzioni.

fonte

2013-04-16 07:10:28 joakimbl

Quasi lì - il problema che ho è che se digito nella casella di ricerca e premere invio, si ricarica solo le app e non ottiene mai i dati di ricerca per il recupero ajax. – cyberwombat

Ho ng-submit nel modulo che chiama una funzione all'interno di MainCtrl - non so come ottenerlo per attivare una ricarica in ManageOrderCtrl. – cyberwombat

Sembra un problema diverso da quello descritto nella domanda originale, ma se riesci a ricreare il problema in un plnkr posso provarlo – joakimbl

Prova questa ...

Vista:

<body ng-app="myApp" > 
    <input type="text" id="search" ng-model="searchQuery" /> 
    <div class="ng-cloak" > 
    <div ng-view></div> 
    </div> 
</body>

Usandolo nel controller:

$http.get('/orders?query=' + $scope.searchQuery). 
    success(function(data, status, headers, config) { 
     $scope.orders = data.orders; 
});

In sostanza, si può fare con qualsiasi cosa INSIDE ng-app ... Spostare il ng-app al tag html ed è possibile modificare il title come bene!

fonte

2013-04-16 06:33:03

Questo non funziona se la vista è associata a un controller. seachQuery non sarà collegato all'ambito di tale controller. –

È possibile utilizzare le gerarchie di ambito .

Aggiungi un "esterno" ng-controller definizione per il codice HTML in questo modo:

<body ng-controller="MainCtrl">

che diventerà il campo di applicazione $ genitore. Ma non è necessario condividere i dati utilizzando un servizio. Non è nemmeno necessario utilizzare l'ambito $scope.$parent. È possibile utilizzare scope hierarchies. (Vedi la sezione Gerarchie dell'ambito in quella pagina). È veramente facile

Nella tua MainCtrl, potrebbe essere questo:

$scope.userName = "Aziz";

Poi, in qualsiasi controllore che viene inserito all'interno MainCtrl (e non ignorare il nome utente nel proprio campo di applicazione) avrà nomeUtente anche! Puoi utilizzare nella vista con {{userName}}.

fonte

2013-09-25 15:24:34 Jess

inizialmente, supponiamo di avere un controller di accesso e una vista di login in ng-view che si trova nel controller principale, come dovrei aggiornare il controller principale dai dati venendo dalla vista di accesso? dobbiamo riavviare anche il controller principale. –

L'ambito del controller principale è disponibile nell'ambito di un ambito nidificato. Metti un punto di interruzione nel codice e guarda $ scope. – Jess

AngularJS - elementi di accesso esterni alla vista ng

risposta

Problemi correlati