我正在尝试在我的应用程序中使用内联模板,但我不想使用任何类型的路由。目前我在初始阶段加载所有数据,但我希望数据onclick事件与内联模板。
因为要求是在点击链接时它将从3个控制器加载数据。并将进行过渡。如果我使用路由它工作正常但我必须在整个应用程序中实现路由。
那么请你帮我安排内联模板而不使用路由?
以下是一个例子: -
<ng-view>Loading...</ng-view>
<!-- Inline Templates (Partials) -->
<script type=text/ng-template id=home.html>
<!-- Home -->
<ul>
<li><a href="#/list">Show Items</a></li>
<li><a href="#/settings">Settings</a></li>
</ul>
</script>
<script type=text/ng-template id=list.html>
<!-- List -->
<p>Choose an Item</p>
<ul>
<li ng-repeat="item in items"><a href="#/detail/{{item.id}}">{{item.title}}</a></li>
</ul>
</script>
这是我的角度路由: -
angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {templateUrl: 'home.html', controller: HomeCtrl}).
when('/list', {templateUrl: 'list.html', controller: ListCtrl}).
when('/detail/:itemId', {templateUrl: 'detail.html', controller: DetailCtrl}).
when('/settings', {templateUrl: 'settings.html', controller: SettingsCtrl}).
otherwise({redirectTo: '/home'});
}]);
我不想使用路由,但希望通过点击事件加载这些模板。
感谢。
答案 0 :(得分:2)
听起来像你想要的是使用ng-include。 http://www.w3schools.com/angular/angular_includes.asp https://docs.angularjs.org/api/ng/directive/ngInclude
使用此功能,您可以在页面上显示内联模板,并将它们映射到不同的控制器。即。
<div ng-if="yourConditionHere" ng-controller="yourControllerName" ng-include="'myFile.htm'"></div>