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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有3个不同的视图（DetailView，CardView，Column）模板/ html页面以单页显示。用户可以在这3个视图之间切换。如何在AngularJS中包含动态模板？

我想单一视图在页面时绑定，如果用户打开它会删除以前的观点，并结合新的视图。我有模型中的数据绑定视图，所以我不需要调用服务来绑定数据。我希望在不刷新页面和加载数据的情况下在这三个视图之间切换。

问题是，如果将三个视图将与DIV-ID发生冲突，有很多的HTML代码中的DOM所有视图。

请推荐我如何切换这些不同的视图，而不需要加载&刷新页面？

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

回答：

据我所知角应用程序是SPA（单页应用程序），所以如果您通过路由的默认行为，其一个你所要求的切换页面。它不会重新加载/刷新页面。它删除以前的视图并绑定新视图。

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

还尝试使用$位置服务就可以切换路线。它不会重新加载页面。 $ location.path（“/ your-route”）。

回答：

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

配置示例： https://docs.angularjs.org/tutorial/step_07

对于较大的应用程序，我建议你使用的用户界面路由器： https://github.com/angular-ui/ui-router

反正

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' 
     }); 
    }]);

可以角的文档中阅读更多关于它，如果你正在寻找简单而没有任何路由的东西，你应该使用NG-IF而不是NG-SHOW。 NG-SHOW只是通过css隐藏HTML（显示无），这意味着可能存在具有相同ID的元素的冲突。 NG-IF会从DOM中删除元素，所以不会有任何冲突。

祝你好运！

回答：

从我能理解，当第一次加载页面，你有一定的标志，以示该视图和相应的呼叫服务将数据绑定到了这一观点。

下一次，更新模型和一个新的标志设置，一个新的观点来发挥作用，类似的服务将数据绑定..

模型最初设置的所有虚假，使一个真正的违约。

通过切换视图：

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

通过这种方式，在特定的时间只有一个格是活动和id不会冲突。

在控制器：

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

同样，当新的模型更新，将所有以前为false。

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

以上是 如何在AngularJS中包含动态模板？ 的全部内容， 来源链接： utcz.com/qa/260123.html

回到顶部