动态模板URL

我是第一次使用现有的应用程序首次潜入Angular 1。我想改变的这个应用程序的其中一点是，我们应用程序中的每个实体都有独立的服务和其他事物。动态模板URL

我已经抽象出来，所以只有一个服务的所有实体，但现在我试图加载一个模板，其中的文件名等于特定的状态参数。

这里是如何的每个实体路由现在已经完成：

namespace App.Employee { 
    'use strict'; 

    angular 
     .module('app.employee') 
     .run(appRun); 

    appRun.$inject = ['routerHelper']; 
    function appRun(routerHelper: Common.Router.IRouterHelperService) { 
     routerHelper.configureStates(getStates()); 
    } 

    function getStates() { 
     return [{ 
      name: 'employee', 
      url: '/employee/{employeeId}', 
      templateUrl: 'app/employee/employee.html', 
      controller: 'employeeCtrl', 
      controllerAs: 'vm', 
      data: { 
       title: 'Employee' 
      } 
     }]; 
    } 
}

这里就是我想将它更改为：

namespace App.Entity { 
    'use strict'; 

    angular 
     .module('app.entity') 
     .run(appRun); 

    appRun.$inject = ['routerHelper']; 

    function appRun(routerHelper: Common.Router.IRouterHelperService) { 
     routerHelper.configureStates(getStates()); 
    } 

    function getStates() { 
     return [{ 
      name: '||entityTypeName||', 
      url: '/{entityTypeName}/{entityId}', 
      templateUrl: 'app/entity/||entityTypeName||.html', 
      controller: 'entityCtrl', 
      controllerAs: 'vm', 
      data: { 
       title: '||entityTypeName||' 
      } 
     }]; 
    } 
}

注意我是如何在URL中介绍{entityTypeName}。这成功地指向适当的Web API服务并将实体拉回。但是，我想将||entityTypeName||占位符标记为与{entityTypeName}匹配的内容。至少这是总体思路。

在这一点上，我对Angular知之甚少，并且随着我的进步而学习，所以让我知道是否需要额外的代码。

来源

2016-12-15 oscilatingcretin

的可能的复制[Angular.js指令动态templateURL] （http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl/21835866） – MoMo

templateUrl属性可以被赋予一个函数而不是一个字符串，并且会传递当前状态参数。像这样：

templateUrl: function(params) { 
    return 'app/entity/' + params.entityTypeName + '.html'; 
}

params参数是由ui-router框架为您提供的。

来源

2016-12-15 20:25:09

不错，它的工作原理！不过，我会将你的代码更正为'params.entityTypeName'。无论如何，10分给你，先生 – oscilatingcretin

毫米。接得好。完成。 –

我使用动态路由的意见和视图参数，像这样也做同样的事情：

 /** 
     * url: "/view?a" 
     * Will match to url of "/view?a=value" 
     */ 
     .state('root.view', { 
      url: '/view?a', 
      views: { 
        '[email protected]': { templateUrl: function(params) {console.log(params.a); return 'app/views/ + params.path + ".php"} } 
      } 
     })

或者以下：

 /** 
     * Dynamic Routing 
     */ 
     .state('root.catpath', { 
      url: '/{path:.*}', 
      views: { 
       '[email protected]': { templateUrl: function(params) {console.log(params); return 'app/views/' + params.path + ".php"} } 
      } 
     });

来源

2016-12-15 20:37:36

回答

相关问题