我们可以使用内联模板而不使用任何类型的路由吗?

时间:2015-12-23 06:18:43

标签: angularjs

我正在尝试在我的应用程序中使用内联模板,但我不想使用任何类型的路由。目前我在初始阶段加载所有数据,但我希望数据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'});
}]);

我不想使用路由,但希望通过点击事件加载这些模板。

感谢。

1 个答案:

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