Angular切换状态后视图未替换而是叠加问题求助

这种视图叠加的情况我之前也碰到过，核心原因就是状态切换时没有明确指定要替换的目标视图容器，导致ui-router把新视图直接追加到页面里，而不是覆盖原有内容。结合你给出的代码片段，我给你几个具体的解决方案：

1. 用子状态+视图定位语法替换目标视图 #

如果company、news这些页面是基于main状态的子页面，你可以把它们定义为main的子状态，然后通过视图名称@状态名称的语法明确指定要替换main状态里的search视图：

$stateProvider
  .state('main', {
    url: '/',
    views: {
      'search': { templateUrl: 'views/search.html', controller: 'categoryCtrl' },
      'footer': { templateUrl: 'views/footer.html' }
    }
  })
  // 定义company为main的子状态
  .state('main.company', {
    url: '/company',
    views: {
      // 这里的'search@main'表示替换main状态下的search命名视图
      'search@main': {
        templateUrl: 'views/company.html',
        controller: 'CompanyCtrl'
      }
    }
  })
  .state('main.news', {
    url: '/news',
    views: {
      'search@main': {
        templateUrl: 'views/news.html',
        controller: 'NewsCtrl'
      }
    }
  })
  .state('main.events', {
    url: '/events',
    views: {
      'search@main': {
        templateUrl: 'views/events.html',
        controller: 'EventsCtrl'
      }
    }
  });

2. 检查页面中的视图容器 #

确保你的HTML里只定义了一组对应名称的ui-view容器，比如：

<!-- 正确的视图容器定义 -->
<div ui-view="search"></div>
<div ui-view="footer"></div>

如果页面里重复定义了ui-view="search"，ui-router会把新视图渲染到所有匹配的容器里，自然就会出现叠加效果。

3. 用抽象状态优化公共视图（可选） #

如果footer是所有页面都需要的公共部分，你可以把main设为抽象状态，让子状态继承这个公共视图，只替换search部分，这样代码更简洁：

$stateProvider
  // 抽象状态，不能直接访问，作为父状态提供公共视图
  .state('main', {
    abstract: true,
    views: {
      'footer': { templateUrl: 'views/footer.html' }
    }
  })
  // 首页作为main的子状态
  .state('main.home', {
    url: '/',
    views: {
      'search@': { templateUrl: 'views/search.html', controller: 'categoryCtrl' }
    }
  })
  .state('main.company', {
    url: '/company',
    views: {
      'search@': { templateUrl: 'views/company.html', controller: 'CompanyCtrl' }
    }
  });

这里的'search@'表示替换根模板中的search视图，因为抽象状态本身没有url，子状态的视图需要明确指向根容器。

关键总结 #

本质上就是要让ui-router知道：切换状态时应该把新视图放到哪个容器里，替换掉原来的内容。只要明确了视图的定位规则，叠加的问题就解决了。

内容的提问来源于stack exchange，提问作者Denis Evseev