如何使用ui-router将对象从1 $ state发送到另一个$ state [英] How to send object from 1 $state into another $state with ui-router

查看：64
本文介绍了如何使用ui-router将对象从1 $ state发送到另一个$ state的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述







应用程序的当前状态路径：-> 登录>容器>标记



股票行情指示器按钮在股票行情指示器中单击： 

  $ scope.clickTicker = function（ticker）{
 console.log（'Ticker clicked！'，ticker）
 $ state.go（'tags '，{ticker：ticker}）; 
}

app.container.html（登录后进入此处）容器状态 

 < div> 
< dashboard-module>< / dashboard-module> 
< feed-module>< / feed-module> 
< / div>

dashboard.html 仪表板状态 

 < div class = jumbotron text-center> 
< h1>仪表板< / h1> 
< / div> 
 
< div class = row> 
< tickers-module>< / tickers-module> 
< tags-module>< / tags-module> 
< view-module>< / view-module> 
< social-module>< / social-module> 
< / div>





完整代码



  //容器模块
 ////////////////////////// ///////////////////////////////////////////////////// //// 
 var container = angular.module（'container'，['ui.router']）
 container.config（function（$ stateProvider）{
 const container = {
名称：'container'，
 url：'/ container'，
 templateUrl：'app.container.html'
} 
 
 $ stateProvider.state （容器）； 
}）； 
 
 //股票行情模块
 ////////////////////////////////// ///////////////////////////// 
 var tickers = angular.module（'tickers'，['ui.router']）
 tickers.config（function（$ stateProvider）{
 
 const tickers = {
名称：'tickers'，
 url：'/ tickers'，
参数：{
 ticker：{} 
}，
 //父级：'dashboard'，
 templateUrl：'< p> Tickers State< / p>'，
控制器：function（$ scope，$ state）{
 console.log（'Tickers state'，$ state.params ）; 
} 
} 
 
 $ stateProvider.state（tickers ;; 
}）
 tickers.component（'tickersModule'，{
 templateUrl：'tickers-module-template.html'，
控制器：function（$ scope，$ state）{
 console.log（'Tickers component'，$ state.params）; 
 $ scope.tickers = [
 {id：1，ticker：'AAPL'}，
 {id：2，tic ker： GOOG}，
 {id：3，代码： TWTR} 
]； 
 
 $ scope.clickTicker = function（ticker）{
 console.log（'Ticker clicked！'，ticker）
 $ state.go（'tags'，{ticker：代码}）; 
} 
} 
}）； 
 
 //标签模块
 ////////////////////////////////// ///////////////////////////// 
 var标签= angular.module（'tags'，['ui.router']）
 tags.config（function（$ stateProvider）{
 
 const标签= {
名称：'tags'，
 url：'/ tags'，
参数：{
 ticker：{} 
}，
 //父级：'dashboard'，
模板：< p>标记状态< / p>，
控制器：function（$ scope，$ state）{
 console.log（'Tags state'，$ state.params ）; 
} 
} 
 
 $ stateProvider.state（tags; 
}）
 tags.component（'tagsModule'，{
 templateUrl：'tags-module-template.html'，
控制器：function（$ scope，$ state）{
 console.log（'Tags component'，$ state.params）; 
 const tags_model = [
 {
 ticker：'AAPL'，
 tags：[{id：1，term：'iPhone 7'}，{id：2，术语： iPhone 8}，{id：3，术语：蒂姆·库克}] 
}，
 {
代码： GOOG，
标签：[{ id：4，术语： Pixel}，{id：5，术语： Pixel XL}，{id：6，术语： Chrome Book}} 
}，
 {
 ticker：'TWTR'，
标签：[{id：7，条款：'tweet'}，{id：8，条款：'retweet'}，{id：9，条款：'moments'} ] 
} 
]; 
 
 function matchTags（ticker，model）{
 return model.filter（function（obj）{
 if（obj.ticker === ticker）{return obj;} 
}）; 
} 
 
 $ scope.tags_model = matchTags（$ state.params.ticker.ticker，tags_model）[0]; 
 
 $ scope.clickTag = function（tag）{
 $ state.go（’tags’，{tag：tag}）; 
} 
 
 console.log（'Tags init'，$ state.params）; 
} 
}）； 
 
 // ViewHeader模块
 ///////////////////////////////// ///////////////////////////// 
 var view = angular.module（'view'，['ui.router']）
 view.config（function（$ stateProvider）{
 
 const view = {
 name ：视图，
网址： / view，
参数：{
标签：{} 
}，
模板：< p>查看状态< ; / p>'，
} 
 
 $ stateProvider.state（view）; 
 
}）
 view.component（'viewModule'，{ 
 templateUrl：'view-module-template.html'，
控制器：function（$ scope，$ state）{
 console.log（'View component'，$ state.params）; 
 $ scope.tag = $ state.params.tag; 
} 
}）； 
 
 //社交模块
 /////////////////////////////////// ///////////////////////////// 
 var social = angular.module（'social'，['ui.router']）
 social.config（function（$ stateProvider）{
 
 const social = {
名称：社交，
网址： / social，
参数：{
标签：{} 
}，
模板：< p>社交状态< ; / p>'，
} 
 
 $ stateProvider.state（social）; 
 
}）
 social.component（'socialModule'，{ 
 templateUrl：'social-module-template.html'，
控制器：function（$ scope，$ state）{
 console.log（'Social component'，$ state.params）; 
 $ scope.tag = $ state.params.tag; 
} 
}）； 
 
 // Feed模块
 ////////////////////////////////// ///////////////////////////// 
 var feed = angular.module（'feed'，['ui.router']）
 feed.config（function（$ stateProvider）{
 
 const feed = {
 name ：'feed'，
 url：'/ feed'，
 templateUrl：'< em>进料项到这里。< / em>'
} 
 
 $ stateProvider.state（feed）; 
}）
 feed.component（'feedModule'，{
 templateUrl：'feed-module-template.html'，
控制器： function（$ scope，$ state）{
 console.log（'Feed init（only一次）'，$ state.params）; 
} 
}）; 
 
 // RouterApp模块
 ////////////////////////////////// ///////////////////////////// 
 var routerApp = angular.module（'routerApp'，['ui.router'，'container'，'tickers'，'tags'，'view'，'social'，'feed']）; 
 
 routerApp.config（function（$ stateProvider，$ urlRouterProvider）{
 
 $ urlRouterProvider.otherwise（'/ login'）; 
 
 const登录= {
 name：'login'，
 url：'/ login'，
 templateUrl：'login.html'，
 bindToController：true，
 controllerAs：' l'，
控制器：function（$ state）{
 this.login = function（）{
 $ state.go（'container'，{}）; 
} 
} 
} 
 
 const仪表板= {
名称：'dashboard'，
 url：'/ dashboard'，
参数：{
代码：{}，
标签：{} 
}，
视图：{
''：{
 templateUrl：'dashboard.html'，
} 
} 
} 
 
 $ stateProvider 
 .state（登录）
 .state（仪表板）; 
}）
 container.component（'dashboardModule'，{
 templateUrl：'dashboard.html'，
控制器：function（$ scope，$ state ）{
 console.log（’）; 
 console.log（仪表板组件，$ state.params）； 
} 
}）


解决方案

有更新的朋克车



也就是说，我们必须将标记状态设置为容器一个的子代

  const tags = {
 //在这里，我们将父代用作子状态的占位符。
父代：容器，
名称： tags ，
 url：'/ tags'，

此外，模板中的容器状态现在具有目标

 < div ui-view> 
< / div>

最后-tags stat在其模板中包含tag-module 

 模板：'< p> Tags State< / p>< tags-module>< / tags-module>'，

检查它这里，也可以进一步了解嵌套，请检查以下内容：




https://plnkr.co/edit/nqyBTcBgBimjkrpf2oYo?p=preview

Expected

After Login Selecting a Ticker button should make the Tags module display the matching Tags for that Ticker.

Results

After Login Selecting a Ticker button will replace the entire app in the index's ui-view with the Tags $state object.

App's current state path: -> login > container > tags

The ticker button click in the Tickers component:

$scope.clickTicker = function(ticker) {
  console.log(' Ticker clicked!', ticker)
  $state.go('tags', { ticker: ticker });
}

app.container.html (We go here after login) container state

<div>
  <dashboard-module></dashboard-module>
  <feed-module></feed-module>
</div>

dashboard.html dashboard state

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>
  <view-module></view-module>
  <social-module></social-module>
</div>

Full Code

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
    container.config(function($stateProvider) {
      const container = {
        name: 'container',
        url: '/container',
        templateUrl: 'app.container.html'
      }

      $stateProvider.state(container);
    });

// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])
    tickers.config(function($stateProvider) {

      const tickers = {
        name: 'tickers',
        url: '/tickers',
        params: {
          ticker: {}
        },
        // parent: 'dashboard',
        templateUrl: '<p>Tickers State</p>',
        controller: function($scope, $state) {
          console.log('Tickers state', $state.params);
        }
      }

      $stateProvider.state(tickers);
    })
    tickers.component('tickersModule', {
      templateUrl: 'tickers-module-template.html',
      controller: function($scope, $state) {
        console.log('Tickers component', $state.params);
        $scope.tickers = [
          { id: 1, ticker: 'AAPL' },
          { id: 2, ticker: 'GOOG' },
          { id: 3, ticker: 'TWTR' }
        ];

        $scope.clickTicker = function(ticker) {
          console.log(' Ticker clicked!', ticker)
          $state.go('tags', { ticker: ticker });
        }
      }
    });

// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
    tags.config(function($stateProvider) {

      const tags = {
        name: 'tags',
        url: '/tags',
        params: {
          ticker: {}
        },
        // parent: 'dashboard',
        template: '<p>Tags State</p>',
        controller: function($scope, $state) {
          console.log('Tags state', $state.params);
        }
      }

      $stateProvider.state(tags);
    })
    tags.component('tagsModule', {
      templateUrl: 'tags-module-template.html',
      controller: function($scope, $state) {
        console.log('Tags component', $state.params);
        const tags_model = [
          {
            ticker: 'AAPL',
            tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
          },
          {
            ticker: 'GOOG',
            tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
          },
          {
            ticker: 'TWTR',
            tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
          }
        ];

        function matchTags(ticker, model) {
          return model.filter(function(obj){
            if (obj.ticker === ticker) { return obj; }
          });
        }

        $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];

        $scope.clickTag = function(tag) {
          $state.go('tags', { tag: tag });
        }

        console.log('Tags init', $state.params);
      }
    });

// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
    view.config(function($stateProvider) {

      const view = {
        name: 'view',
        url: '/view',
        params: {
          tag: {}
        },
        template: '<p>View state</p>',
      }

      $stateProvider.state(view);

    })
    view.component('viewModule', {
      templateUrl: 'view-module-template.html',
      controller: function($scope, $state) {
        console.log('View component', $state.params);
        $scope.tag = $state.params.tag;
      }
    });

// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
    social.config(function($stateProvider) {

      const social = {
        name: 'social',
        url: '/social',
        params: {
          tag: {}
        },
        template: '<p>Social state</p>',
      }

      $stateProvider.state(social);

    })
    social.component('socialModule', {
      templateUrl: 'social-module-template.html',
      controller: function($scope, $state) {
        console.log('Social component', $state.params);
        $scope.tag = $state.params.tag;
      }
    });

// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])
    feed.config(function($stateProvider) {

      const feed = {
        name: 'feed',
        url: '/feed',
        templateUrl: '<em>Feed items go here.</em>'
      }

      $stateProvider.state(feed);
    })
    feed.component('feedModule', {
      templateUrl: 'feed-module-template.html',
      controller: function($scope, $state) {
        console.log('Feed init (only once)', $state.params);
      }
    });

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'container', 'tickers', 'tags', 'view', 'social', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('container', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
})
container.component('dashboardModule', {
  templateUrl: 'dashboard.html',
  controller: function($scope, $state) {
    console.log('');
    console.log('Dashboard component', $state.params);
  }
})

解决方案

There is the updated plunker

Namely we have to set a tags state as a child of container one

  const tags = {
    // here we use parent as a placeholder for our child state
    parent: 'container',
    name: 'tags',
    url: '/tags',

also, the container state now in template has a target

<div ui-view>
</div>

And finally - tags stat has as a part of its template the tags-module

template: '<p>Tags State</p><tags-module></tags-module>',

Check it here and also to get more understanding about nesting, maybe check this:

这篇关于如何使用ui-router将对象从1 $ state发送到另一个$ state的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆