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

问题描述

完整的Plnkr代码: https://plnkr.co/edit/5A5YFEWZ7ZTzRJloxgka? p =预览

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

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

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

• 标签"状态子视图均未呈现

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

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

  }
})

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.

我更改的代码在app.js中，如下所示:

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