1

アプリ全体でパラメーターを保持するために、開始時にデフォルトのパラメーターを持つファクトリーによって提供されるパラメーターを使用して、Angular 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'
      })
  })

動物.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 attribute to:

$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

(データがロードされてファクトリにあるが、選択リストから選択されるまで表示されないという点で、別の奇妙な出来事があります。)

4

0 に答える 0