时间戳

首页 > 解决方案 > 如何添加动态模板Url

angularjs - 如何添加动态模板Url

问题描述

我有 Web 应用程序，我需要在其中加载具有不同参数的模板，例如。

.when('/form/:ProjectID/:FormID', {
        templateUrl: 'partials/Form.ashx?fid=' + FormID,
        controller: 'FormController'
    })

我无法使上述代码正常工作。有人可以告诉我如何解决这个问题吗？我是 AngularJS 的新手，而不是专家。

这是完整的代码。

var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'partials/Home.ashx',
        controller: 'HomeController'
    })
    .when('/project/:ProjectID', {
        templateUrl: 'partials/Projects.ashx',
        controller: 'ProjectController'
    })
    .when('/form/:ProjectID/:FormID', {
        templateUrl: 'partials/Form.ashx?fid=1',
        controller: 'FormController'
    })
    .otherwise({ redirectTo: '/home' });

});

标签： angularjs

解决方案

我们可以使用 $stateParams 和 templateProvider 来加载动态的 templateurl

.state('general', {
   url: '/{type}',
   //templateUrl: 'pages/home.html',
   templateProvider: ['$stateParams', '$templateRequest',
      function($stateParams, $templateRequest) 
      {
        var tplName = "pages/" + $stateParams.type + ".html";
        return $templateRequest(tplName);
      }
    ],
    // general controller instead of home
    //controller: 'homeController',
    controller: 'generalController',
    controllerAs: 'ctrl'

推荐阅读