1

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

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

应用程序.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'
      })
  })

动物.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——工厂

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

zoo.js——控制器

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 when 属性为：

$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

如果选择了 wolf，无论是使用后退箭头还是其他页面的 Animals 链接。或者如果刷新它会转到默认的动物（绵羊）页面。但现在如果你在

localhostL8000/#/zoo/animals/sheep

页面并单击它转到的动物链接

localhost:8000/#/zoo/animals

（还有另一个奇怪的情况，即数据已加载并在工厂中，但在从选择列表中选择之前不会显示。）

4

0 回答 0