Question

我有3个不同的视图（DetailView，CardView，Column）模板/ html页面以单页显示。用户可以在这3个视图之间切换。

我想在页面中一次绑定单个视图，如果用户切换它将删除以前的视图并绑定新视图。我在Model中有数据绑定视图所以，我不需要调用服务来绑定数据。我想在没有刷新页面和加载数据的情况下在这三个视图之间切换。

问题是，如果绑定三个视图它将与div-id冲突，并且DOM中的所有视图都有很多html代码。

请建议我如何在这些不同的视图之间切换而不加载＆amp;刷新页面??

<body>
  <div ng-include="'detailView.html'" ng-show="detailView"></div>
  <div ng-include="'cardView.html'" ng-show="cardView"></div>
  <div ng-include="'cardView.html'" ng-show="cardView"></div>
</body>

Answer 1

我知道Angular Apps是SPA（单页应用程序），因此如果您通过路由其默认行为来切换页面，那么就是您要求的页面。它没有重新加载/刷新页面。它删除以前的视图并绑定新视图。

请查看本指南：https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

还尝试使用$ location服务来切换路由。它不会重新加载页面。 $ location.path（＆＃34; /你的路线＆＃34）。

Answer 2

Angular有路由模块。这样，您就可以使用自己的URL，HTML模板和控制器定义路径（页面）。

配置示例：

YOUR_MODULE.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

您可以在angular的文档中阅读更多相关信息： https://docs.angularjs.org/tutorial/step_07

对于更大的应用程序，我建议您使用UI-ROUTER： https://github.com/angular-ui/ui-router

无论如何，如果你正在寻找简单而没有任何路由的东西，你应该使用NG-IF而不是NG-SHOW。 NG-SHOW只是通过css隐藏HTML（显示无），这意味着具有相同ID的元素可能存在冲突。 NG-IF将从DOM中删除元素，因此不存在任何冲突。

祝你好运！

Answer 3

根据我的理解，当第一次加载页面时，您会有一些标记显示该视图以及对服务的相应调用以将数据绑定到该视图。

下次更新模型并设置新标志，新视图发挥作用，类似服务绑定数据。

最初将模型all设置为false，默认为true。

在视图中切换为：

<body>
  <div ng-include="'detailView.html'" ng-if="detailView"></div>
  <div ng-include="'cardView.html'" ng-if="cardView"></div>
</body>

通过此，在特定时间只有一个div处于活动状态且id不会发生冲突。

在控制器中：

If($scope.detailView == true){
    //Call to service for data..
}

同样，当更新新模型时，将之前的所有内容设置为false。

请更新您的查询以更明确您的目标。

如何在AngularJS中包含模板动态？

3 个答案: