模块子视图未在组件模板的 ui 视图中呈现 [英] Module sub views not rendering in ui-views of component template

问题描述

完整 Plnkr 代码:

预期

• 标签标题子视图的模板应呈现在标签列表中.
• 标签计数器子视图模板应呈现在标签列表中
• 当点击 Count it Tickers 列表时，标签计数器编号应该更新.

结果

• 没有任何标签状态子视图呈现

标签模块、状态配置和组件:

var tags = angular.module('tags', ['ui.router'])标签.配置(功能($stateProvider){const 标签 = {名称标签'，网址:'/标签'，父级:仪表板"，意见:{'' : { 模板: '<p>这是标签</p>'},'title@tags' : { 模板: '<p>Tags Title!</p>'},'计数器@标签':{模板:'<p class="counter">{{ counter }}</p>',参数:{计数器:0},bindToController: 真，控制器:函数($scope，$state){console.log('标签状态对象', $state)$scope.counter = $state.params.counter;}}}}$stateProvider.state(tags);})tags.component('tagsModule', {templateUrl: 'tags-module-template.html',控制器:函数($scope，$state){}})

tags-module-template.html

<h2>标签列表</h2><div class="row"><div class="col-sm-3">标签标题在这里:<div ui-view="title"></div>
<div class="col-sm-3">标签计数器在这里:<div ui-view="计数器"></div>

解决方案

我对您的 plunker 进行了一些更改.这里是更新的.

我改的代码在app.js中如下:

const 标签 = {名称标签'，url: '/tags/:counter',父级:仪表板"，意见:{'' : { 模板: '<p>这是标签</p>'},'title' : { 模板: '<p>Tags Title!</p>'},'柜台': {模板:'<p class="counter">{{ counter }}</p>',参数:{计数器:0},bindToController: 真，控制器:函数($scope，$stateParams){$scope.counter = $stateParams.counter;}}}}

请注意，我将 counter 作为参数传递给标签 url.

我正在使用 stateParams 服务.一旦您单击计数，您就会开始在嵌套标签视图中看到值.根据需要，当按下计数按钮时，标签计数器值会更新.

Full Plnkr code: https://plnkr.co/edit/5A5YFEWZ7ZTzRJloxgka?p=preview

Expected

• The Tags title sub view's template should render in the Tags list.
• The Tags counter sub view template should render in the Tags list
• The Tags counter number should update when the Count it Tickers list is clicked.

Results

• None of the Tags state sub views render

The Tags module, state config and component:

var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {

  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    views: {
      '' : { template: '<p>Hi this is Tags</p>' },
      'title@tags' : { template: '<p>Tags Title!</p>' },
      'counter@tags': {
        template: '<p class="counter">{{ counter }}</p>',
        params: {
          counter: 0
        },
        bindToController: true,
        controller: function($scope, $state) {
          console.log('tags state object', $state)
          $scope.counter = $state.params.counter;
        }
      }
    }
  }

  $stateProvider.state(tags);

})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {

  }
})

The tags-module-template.html

<div class="jumbotron text-center">
  <h2>Tags list</h2>

  <div class="row">
    <div class="col-sm-3">
        Tags title here:
        <div ui-view="title"></div>
    </div>

    <div class="col-sm-3">
      Tags counter here:
      <div ui-view="counter"></div>
    </div>
  </div>

</div>

解决方案

I made some changes to your plunker. Here is the updated one.

The code I changed is in app.js as follows:

const tags = {
    name: 'tags',
    url: '/tags/:counter',
    parent: 'dashboard',
    views: {
      '' : { template: '<p>Hi this is Tags</p>' },
      'title' : { template: '<p>Tags Title!</p>' },
      'counter': {
        template: '<p class="counter">{{ counter }}</p>',
        params: {
          counter: 0
        },
        bindToController: true,
        controller: function($scope, $stateParams) {
          $scope.counter = $stateParams.counter;
        }
      }
    }
  }

Note that I'm passing counter as a param to the tags url.

I'm passing the counter value to the controller using the stateParams service. As soon as you click on count, you start seeing the values in your nested tags view. As required, the tags counter value updates when the count button is pressed.

这篇关于模块子视图未在组件模板的 ui 视图中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！