Set dynamische URL, die auf Staat, in AngularJS mit Ui-Router
Habe ich eine ng-include Rendern von partials auf meiner Seite, aber so ist die Natur des ng-include ich brauche keinen Staat, der zum laden der Teiltöne. Ich möchte die URL zu aktualisieren, wenn die ng-include-aktualisiert die Ansicht, so meine analytics verfolgen Sie, wie eine änderung der Seite. Ich Frage mich, der beste Weg, dies zu tun.
Bin ich auch mit angular-ui-router, die macht ng-include irrelevant, da der nested-Staaten; bis einer kommt in meine situation: ich habe eine große Anzahl der Teiltöne laden in die ng-include, das ist schön, weil alles, was ich zu bieten ist ein Weg, um die partielle und nicht um eine große Anzahl von verschiedenen Mitgliedstaaten my $stateProvider-Datei; aber dann gibt es auch keine benutzerdefinierte url. Als solche war das, was ich Fragen, ist die folgende:
Kann eine Ng-include aktualisieren Sie die url der Seite wird beim laden eines teilweise ohne einen Staat definiert, Teilansicht
ODER
etwas, das würde mein problem lösen insgesamt: gibt es eine Möglichkeit zum hinzufügen von Staaten, die haben eine url, die kann dynamisch aktualisiert werden? wie:
.state( 'test', {
url: function( stateId ){
//where stateId is somehow passed into the $stateParams of the new state
},
templateUrl: "templates/views/test.html"
})
ist hier die Einrichtung so weit für mein ng-include, wenn Sie irgendwelche Ideen auf, wie man die url ändern, wenn die ng-include stellt einen unterschiedlichen Teil-ich würde mich am meisten gefreut.
::JS::
//states
//self executing function
(function() {
var app = angular.module( 'app', [ 'ui.router', 'ngAnimate' ] );
app.config( function( $stateProvider, $urlRouterProvider ) {
//if url not defined redirect to login
$urlRouterProvider.when( '', "/home" );
//if nonexistant url defined redirect to sign-in
$urlRouterProvider.otherwise( "/home" );
//Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/views/home.html"
});
}()); //self executing function end
//factory
//self executing container function
(function() {
var listFactory = function( ) {
//declare factory for return at end of function
var factory = {};
var list =
{
list1 : [
{
name: 'first',
url: 'templates/views/partials/view1.html',
id: '1'
},
{
name: 'second',
url: 'templates/views/partials/view2.html',
id: '2'
},
{
name: 'third',
url: 'templates/views/partials/view3.html',
id: '3'
},
{
name: 'fourth',
url: 'templates/views/partials/view4.html',
id: '4'
}
]
};
factory.getList = function(){
return list;
};
//return factory object to access data
return factory;
};
angular.module( 'app' ).factory( 'listFactory', listFactory );
}());
//controller
//self executing container function
(function() {
var listController = function ( $scope, listFactory ) {
$scope.listFactory = listFactory.getList();
//set a default list state
$scope.currentList = 'templates/views/partials/default.html';
//function sets list url on click to new scope item for rendering partial view
$scope.setCurrentList = function( url ) {
$scope.currentList = url;
};
};
listController.$inject = [ '$scope', 'listFactory' ];
angular.module('app')
.controller('listController', listController);
}());
::HTML::
<!-- this is loaded in the home state. -->
<div>
<div id="{{ list.id }}" ng-repeat="list in list.list1" ng-click="setCurrentList( list.url )">
<p>{{ list.name }}</p>
</div>
</div>
<div id="list-view-container">
<div class="rotateViewAnimate" ng-include src="currentList"></div>
</div>
::Eher irrelevant CSS::
/* Have to set height explicity on ui-view-container
to prevent collapsing during animation*/
#list-view-container {
position: relative;
min-height: 500px;
overflow: hidden;
}
/* rotate in /out animation transition */
.rotateViewAnimate.ng-enter, .rotateViewAnimate.ng-leave {
/* settings so animations display together */
position: absolute!important;
left: 0!important;
right: 0!important;
-webkit-transition: 0.5s ease-in-out all;
-moz-transition: 0.5s ease-in-out all;
-o-transition: 0.5s ease-in-out all;
transition: 0.5s ease-in-out all;
transform-style: preserve-3d;
}
.rotateViewAnimate.ng-enter {
transform: rotateY(90deg);
opacity: 0;
}
.rotateViewAnimate.ng-enter-active {
transform: rotateY(0deg);
opacity:1;
}
.rotateViewAnimate.ng-leave {
transform: rotateY(0deg);
opacity:1;
}
.rotateViewAnimate.ng-leave-active {
transform: rotateY(90deg);
opacity:0;
}
ng-include
löst ein Ereignis $includeContentLoaded
beim laden einer Vorlage. Die Veranstaltung hat eine src
Eigenschaft, die wird, geben Sie den Namen des partiellen. Man könnte etwas schreiben, hörte Sie auf dieses Ereignis und verändert die URL w/die $location
service. Nicht sicher, wie das spielen mit UI-Router (z.B. änderung der URL würde auch auslösen, einen Zustand zu ändern). Die andere Sache, zu suchen ist, wenn Winkel setzt Ihre Vorlagen in der $templateCache
, wird der event gefeuert werden, wenn Sie anzeigen, die teilweise ein zweites mal...hm sowas wie der folgenden kann die Arbeit mit Ihrer Lösung:
var off = $scope.$on( '$stateChangeStart', function( e ) { e.preventDefault(); }); off(); $location.path('product/123').replace();
Es zumindest halt das statechange beim bummeln, um mit $location-service
InformationsquelleAutor Eolis | 2015-07-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Alles klar also für die Teiltöne bei der Verwendung von Ui-Router, die Sie wollen, um eine
wo Sie wollen, die teilweise zu laden.
Sieht aus wie Sie haben, die home-state-arbeiten korrekt, aber wenn Sie Sie verschachteln möchten die Ansicht, die Sie haben, so etwas zu tun
Die vollständige Url, die aus dieser verschachtelten routing wäre */#/home/notes
Für mehr info:
https://github.com/angular-ui/ui-router/wiki
Mit ng-include mit UI-Router verursacht seltsame Probleme, wie für die URL ändern, wenn Sie verschachtelte views mit UI-ROuter, es wird sich ändern die url /#/home/notes anstelle von /#/home/
hmmm alrighty werden. die Sache ist die, ich bin rendering 250 verschiedene Teiltöne in der gleichen ng-include atm und ich möchte vermeiden, dass ein Staat für jedes partielle, sondern wollen, dass Sie alle behandelt, als eine andere Seite
InformationsquelleAutor Kurt
GELÖST
Das Problem ich war auf der Suche, um zu lösen, ist der Weg über einige Details in der ui-router docs; gefunden hier:
https://github.com/angular-ui/ui-router/wiki
Ich habe folgende Methode um den Effekt zu erzielen, der hier erwähnt:
"Legen Sie eine Dynamische URL, die auf einen Zustand mit ui-router und angularJS"
Gehen durch den angezeigten code in die Frage, die ich stellen entsprechend mit meiner Lösung.
in dem obigen Zustand, Erklärung der Staat "nach Hause.urlChanger" hat eine url mit Sonderzeichen, die Werte von Informationen an die $stateProvider variable. ein SEHR WICHTIGER Hinweis hier ist, dass, wenn man will, in der Lage sein, um auf das Element zugreifen, gespeichert in $stateParams es muss übergeben werden, in der URL. als solche, in meinem controller habe ich folgende Funktion verwenden, um Weitergabe der Informationen, die ich wollen in den Staat mit dem $Staat.go (); - Methode wie folgt:
da kann man aus dem Beispiel oben habe ich versucht zu speichern in $stateparams.Namen, um zu sehen, ob es verfügbar stateparams, aber wie erwartet, wenn Sie den Staat.go(); wird aufgerufen, einen neuen Status wird geladen und die vorherigen $stateparams Objekt ist nicht mehr verfügbar. also, warum die Informationen, die bestanden werden müssen, während $Staat.gehen, um zu speichern ihn in der neu umgestellt wurde, Staaten $stateParams Objekt.
also der html-Code für das verursachen diese auftreten, könnte ein ng klicken Sie auf ein beliebiges element, die Anrufe der setparams( Standort ) - Funktion, die Ihre Variablen in $stateParams, indem man Sie durch die URL und gibt Sie in Ihrem Zustand, dh: eine dynamische URL, die durch den Staat selbst.
hoffentlich jemand findet, dass ein wenig hilfreich, es hat mich einige Zeit, um zu arbeiten durch mich.
InformationsquelleAutor Eolis
Fall ist die änderung der Seite die URL nach http-Anfrage anlegen (201)
hier ist ein Beispiel:
so, es wird gehen, um neue Schüler-url nach dem erstellen.
InformationsquelleAutor Abdallah Okasha