Javascript 如何使用ui路由器将对象从1$状态发送到另一个$状态

预期 登录后，选择一个Ticker按钮应使标记模块显示该Ticker的匹配标记

结果 登录后，选择一个Ticker按钮将用Tags$state对象替换索引ui视图中的整个应用程序

---

---

应用程序的当前状态路径：->

login>container>tags

在ticker组件中单击ticker按钮：

$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>

<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>

---

完整代码

//容器模块
////////////////////////////////////////////////////////////////////////////////
var container=angular.module（'container'，['ui.router']））
container.config（函数（$stateProvider）{
常量容器={
名称：'容器'，
url:“/container”，
templateUrl:'app.container.html'
}
$stateProvider.state（容器）；
});
//股票模块
////////////////////////////////////////////////////////////////////////////////
var tickers=angular.module（'tickers'，['ui.router']））
tickers.config（函数（$stateProvider）{
常量代码={
名称：'tickers'，
url:“/tickers”，
参数：{
股票代码：{}
},
//父项：“仪表板”，
templateUrl:“Tickers State
”，
控制器：函数（$scope，$state）{
log（'Tickers state'，$state.params）；
}
}
$stateProvider.state（股票代码）；
})
tickers.component（'tickersModule'{
templateUrl:“tickers模块template.html”，
控制器：函数（$scope，$state）{
log（'Tickers component'，$state.params）；
$scope.tickers=[
{id:1，股票代码：'AAPL'}，
{id:2，股票代码：'GOOG'}，
{id:3，股票代码：'TWTR'}
];
$scope.clickTicker=功能（ticker）{
console.log（'Ticker clicked！'，Ticker）
$state.go（'tags'，{ticker:ticker}）；
}
}
});
//标签模块
////////////////////////////////////////////////////////////////////////////////
var tags=angular.module（'tags'，['ui.router']））
tags.config（函数（$stateProvider）{
常量标记={
名称：'标签'，
url:“/tags”，
参数：{
股票代码：{}
},
//父项：“仪表板”，
模板：“标记状态
”，
控制器：函数（$scope，$state）{
log（'Tags state'，$state.params）；
}
}
$stateProvider.state（标记）；
})
tags.component（'tagsModule'{
templateUrl:'tags module template.html'，
控制器：函数（$scope，$state）{
log（'Tags component'，$state.params）；
常量标记\u模型=[
{
股票代码：“AAPL”，
标签：[{id:1，术语：'iPhone7'}，{id:2，术语：'iPhone8'}，{id:3，术语：'TimCook'}]
},
{
股票代码：“GOOG”，
标签：[{id:4，术语：'Pixel'}，{id:5，术语：'Pixel XL'}，{id:6，术语：'Chrome Book'}]
},
{
股票代码：TWTR，
标签：[{id:7，术语：'tweet'}，{id:8，术语：'retweet'}，{id:9，术语：'moments'}]
}
];
功能匹配标签（股票代码、型号）{
返回模型过滤器（功能（obj）{
如果（obj.ticker==ticker）{return obj；}
});
}
$scope.tags_model=matchTags（$state.params.ticker.ticker，tags_model）[0]；
$scope.clickTag=函数（标记）{
$state.go（'tags'，{tag:tag}）；
}
log（'tagsinit'，$state.params）；
}
});
//视图标题模块
////////////////////////////////////////////////////////////////////////////////
var view=angular.module（'view'，['ui.router']））
view.config（函数（$stateProvider）{
常量视图={
名称：“视图”，
url:“/view”，
参数：{
标记：{}
},
模板：“查看状态”，
}
$stateProvider.state（视图）；
})
view.component（'viewModule'{
templateUrl:“查看模块template.html”，
控制器：函数（$scope，$state）{
log（'View component'，$state.params）；
$scope.tag=$state.params.tag；
}
});
//社会模块
////////////////////////////////////////////////////////////////////////////////
var social=angular.module（'social'，['ui.router']））
social.config（函数（$stateProvider）{
社会常数={
名称：'社会'，
url:“/social”，
参数：{
标记：{}
},
模板：“社会状态”
，
}
$stateProvider.state（社会）；
})
social.component（“socialModule”{
templateUrl:'social module template.html'，
控制器：函数（$scope，$state）{
log（'Social component'，$state.params）；
$scope.tag=$state.params.tag；
}
});
//馈电模块
////////////////////////////////////////////////////////////////////////////////
var feed=angular.module（'feed'，['ui.router']））
feed.config（函数（$stateProvider）{
常数馈送={
名称：“提要”，
url:“/feed”，
templateUrl:“源项转到此处。”
}
$stateProvider.state（提要）；
})
feed.component（'feedModule'{
templateUrl:'feed module template.html'，
控制器：函数（$scope，$state）{
log（'Feed init（仅一次）'$state.params）；
}
});
//路由器应用模块
////////////////////////////////////////////////////////////////////////////////
var routerApp=angular.module（'routerApp'，['ui.router'，'container'，'tickers'，'tags'，'view'，'social'，'feed']）；
routerApp.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/login'）；
常量登录={
名称：'登录'，
url:“/login”，
templateUrl:'login.html'，
宾托
// 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);
  }
})

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

<div ui-view>
</div>

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