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

Schreibe einen Kommentar