Question

我在使用（多视图，UI路由）小部件明智的实现时面临一个问题。我有两个小部件（名为上部和下部小部件）;其中两个小部件都有表格内容显示一些细节。当我点击上部窗口小部件中的内容时，它会显示该窗口小部件本身的表格内容，但缺少下部窗口小部件下的数据。实际上，我们希望在单击小部件内容时显示小部件内容而不反映任何问题。我也在这里列出了我用过的代码。

这是我的代码

code here http://plnkr.co/edit/1yczuGbjK5yBOzjzWpk5?p=preview

  1:-index page
    <div ui-view="mj"   style="padding-top: 80px;"></div>
    <div ui-view="mj1"  style="padding-top: 80px;"></div>

    2:-app.js
       angular.module('uiRouterSample', [
      'uiRouterSample.contacts',
      'ui.router'
    ])
    .config(
      [          '$stateProvider', '$urlRouterProvider',
        function ($stateProvider,   $urlRouterProvider) {
          $urlRouterProvider
          .otherwise('/');
          $stateProvider
            .state("home", {
              url: "/",
              views: {
                      'mj': {
                          templateUrl: 'tabtable.html'
                      },
                      'mj1': {
                         templateUrl: 'tabtable1.html'
                }}
            })

        }
      ]
    );
     3 :-first widget -tabtable.html
    <table>
    <tr>
    <td><a ui-sref="contacts.tab1">1</a></td>
    <td>Table cell</td>
    <td>Table cell</td>
    <td>Table cell</td>
    </tr>
    </table>
    4 :-2nd widget -tabtable1.html
    <table>
    <tr>
    <td><a ui-sref="contactsmj.tab1mj">1</a></td>
    <td>Table cell</td>
    <td>Table cell</td>
    <td>Table cell</td>
    </tr>
    </table>

      5:loading widget data -contacts.js

    angular.module('uiRouterSample.contacts', [
      'ui.router'
    ])

.config(
  [          '$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {
      $stateProvider

        .state('contacts', {
          abstract: true,
          url: '/contacts',
          views: {
              'mj': {
                  templateUrl: 'contacts.html',

              }


            }

        }).state('contacts.tab1', {
            url: '/tab1',
            views: {
              'cjtab': {
                templateUrl: 'contacts.detail.html'

              }

            }
          })
       .state('contacts.tab2', {
          url: '/tab2',
          views: {
            'cjtab': {
              templateUrl: 'contacts.detail2.html'
            }
          }
        }).state('contacts.tab3', {
            url: '/tab3',
            views: {
              'cjtab': {
                templateUrl: 'contacts.detail3.html'
              }
            }
          }).state('contactsmj', {
                abstract: true,
                url: '/contactsmj',
                views: {
                    'mj1': {


                        templateUrl: 'contactsmj.html',
                        }
                      }
                  })
                 .state('contactsmj.tab2mj', {
                    url: '/tab2mj',
                    views: {
                      'mjtab': {
                        templateUrl: 'contacts.detail2.html'
                      }
                    }
                  }).state('contactsmj.tab3mj', {
                      url: '/tab3mj',
                      views: {
                        'mjtab': {
                          templateUrl: 'contacts.detail3.html'
                        }
                      }
                    }).state('contactsmj.tab1mj', {
                        url: '/tab1mj',
                        views: {
                          'mjtab': {
                            templateUrl: 'contacts.detail.html'

                          }


                        }
                      });

        }
      ]
    );
   6:-click on corresponding link -1 st widget Content page will be loaded
<div>
  <div>
    <div>
    widget 2 Tabs
      <ul>
        <li><a ui-sref="contactsmj.tab1mj">widget 2-Tab 1</li>
        <li><a ui-sref="contactsmj.tab2mj">widget 2-Tab 2</li>
        <li><a ui-sref="contactsmj.tab3mj">widget 2-Tab 3</li>
      </ul>
    </div>
  </div>
 <div ui-view="mjtab"></div>
</div>
  7:-click on corresponding link -2 nd widget Content page will be loaded 
<div>
  <div>
    <div>
    widget 2 Tabs
      <ul>
        <li><a ui-sref="contactsmj.tab1mj">widget 2-Tab 1</li>
        <li><a ui-sref="contactsmj.tab2mj">widget 2-Tab 2</li>
        <li><a ui-sref="contactsmj.tab3mj">widget 2-Tab 3</li>
      </ul>
    </div>
  </div>
 <div ui-view="mjtab"></div>
</div>

Answer 1

问题 - 当您更改路径时，您的视图会更新，并且在新视图中您只映射任一命名视图，因为其他视图正在丢失。

您的问题很难解决。

您必须更新contacts.js中的父状态。喜欢

.state('contacts', {
      abstract: true,
      url: '/contacts',
      views: {
          'mj': {
              templateUrl: 'contacts.html'
          },
          'mj1': {
              templateUrl: 'tabtable1.html'
          }
      }

不要改变路线，只需绑定点击并获取模板，编译它并进行dom操作 - 不推荐。
针对“https://stackoverflow.com/a/23840379/1132354”

我希望它对你有所帮助!!

多个视图，UI路径问题

1 个答案: