Question

我正在尝试使用工厂提供的参数将角度ui-router导航到子状态，该参数在开始时具有默认参数，以便在应用程序中保留参数。

我希望默认主页和该链接转到初始加载时工厂提供的默认动物，然后用户可以在从列表中选择动物时更新动物和参数。工厂，所以当他们导航回动物页面时，它现在改为他们选择的动物与所有动物参数而不是默认值。这样，如果他们去看兽医页面，兽医页面可以检查所有选择的动物参数，当他们返回到动物页面时，它是所选动物，无论他们点击后退按钮还是动物链接。请原谅这个愚蠢的比喻。

app.js：

angular.module('myApp, ['ui.router'])
   .config(function ($stateProvider, $urlRouterProvider) {
      $urlRouterProvider
         .when('zoo', ['animals', function(animals) {
            $state.go('zoo.animals.animal', animals.Params);
          }])
      $stateProvider
         .state('zoo', {
            abstract: true,
            url: '/zoo',
            controller: 'ZooCtrl',
            view: '<ui-view/>'
            resolve: {
               zoo: function(zoo) {
                  return zoo;
               }
            }
         })
     .state('zoo.animals', {
        abstract: true,
        url: '/animals',
        view: '<ui-view/>'
        controller: 'AnimalsCtrl'
      })
      .state('zoo.animals.animal', {
          url: '/:animalId',
          view: 'views/zoo.animals.animal.html'
      })
  })

animals.js

angular.module('myApp')
   .factory('animals', ['zoo', function(zoo) {
      var zoo = zoo;
      var Default = {};
      Default.animalId = 'sheep';
      Default.color = 'black';
      var Params = angular.copy(Default);
      var animal;
      return: {
      Params: Params,
      list: zoo.animals,
      animal: animal
    }
}])

zoo.js - factory

angular.module('myApp')
   .factory('zoo', ['$resource', function($resource) {
      return $resouce('http://zoo.com/info', {
         method: 'GET',
         isArray: true 
      });
   }])

zoo.js - controller

angular.module('myApp')
   .controller('ZooCtrl', ['$scope', 'animals','function($scope, zoo) {
      $scope.animals = animals.list;
      $scope.setAnimal = function(animal) {
      animals.animal = animal;
      animals.Params.animalId = animal.animalId;
    }
}])

zoo.animals.animal.html

<h2>Default animal{{animal.name}}</h2>
<ul>
   <li ng-repeat="animal in zoo.animals"><a ng-click="setAnimal(animal)" ui-sref="/zoo/animals/{{animal.animalId}}">animal.name</li>
</ul>

现在我是否使用此index.html

<a ui-sref="zoo">Animals</a>
<ui-view />

我得到'无法导航到抽象状态' - 很好。但是，如果我尝试这个index.html

<a ui-sref="zoo.animals.animal">Animals</a>
<ui-view />

然后它就到了

localhost:8000/myapp/#/zoo/animals

没有提供animalId。或者，如果我离开它并返回它就消失了。我希望我想要完成的是有道理的。

编辑：更进一步！如果我将index.html链接更改为

<a href="#/zoo">Animals</a>

和app.js属性为：

$urlprovider
   .when('/zoo', ['$state', 'animals', function($state, animals){
      $state.go('zoo.animals.animal', animals.Params);
   }])

然后它会导航到

localhost:8000/#/zoo/animals/sheep

或

localhost:8000/#/zoo/animals/wolf

如果选择狼是否使用其他页面的后退箭头或动物链接。或者如果刷新它会进入默认动物（绵羊）页面。但现在如果你在

localhostL8000/#/zoo/animals/sheep

页面并点击动物链接转到

localhost:8000/#/zoo/animals

（还有另一个奇怪的现象，因为数据已加载并且在工厂中存在但在从选择列表中选择之前不会显示。）

如何使用Angular.js和ui-router使用工厂中的参数导航到子状态？

0 个答案: