Question

对于Play Framework和AngularJs的应用程序，我有以下文件：

app/views/index.scala.html
app/assets/app/app.js
app/assets/app/app.scss
app/assets/app/main/_main.scss
app/assets/app/main/main.controller.js
app/assets/app/main/main.html
app/assets/app/main/main.js
app/assets/components/navbar/navbar.controller.js
app/assets/components/navbar/navbar.directive.js
app/assets/components/navbar/navbar.html

scss个文件位于app/assets，因此sbt-sassify插件会将它们编译为css。其他观点（js和html文件）也位于app/assets，但我可以将其移至公开。

conf/routes包含：

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

navbar.directive.js如下：

angular.module('quotesApp')
  .directive('navbar', () => ({
    templateUrl: 'components/navbar/navbar.html',
    restrict: 'E',
    controller: 'NavbarController',
    controllerAs: 'nav'
  }));

这不起作用，因为templateUrl components/navbar/navbar.html路径需要以/assets/为前缀，如conf/routes文件中所定义。

那么，解决这个问题的正确形式是什么？

我是否应该在文件/assets中对前缀navbar.directive.js进行硬编码，如下所示？但是，在更改路径定义时会出现这种情况。

angular.module('quotesApp')
  .directive('navbar', () => ({
    templateUrl: '/assets/components/navbar/navbar.html',
    restrict: 'E',
    controller: 'NavbarController',
    controllerAs: 'nav'
  }));

我应该创建一个视图app/views/components/navbar/navbar.directive.scala.js（但这只是使用routes函数的许多样板文件）：

@()
angular.module('quotesApp')
  .directive('navbar', () => ({
    templateUrl: @routes.Assets.versioned("components/navbar/navbar.html"),
    restrict: 'E',
    controller: 'NavbarController',
    controllerAs: 'nav'
  }));

还有其他解决方案吗？也许某种相对路径？

Answer 1

您可以在角度指令中需要之前在index.scala.html中定义该路径：

<head>
    <!-- Something -->
    <script>
        window.MyApp = {
            'navBarPath': '@routes.Assets.versioned("components/navbar/navbar.html")';
        };
    </script>
</head>

然后在你的指令中使用：

// (...)
templateUrl: MyApp.navBarPath,

这并不完美，但我认为这是达到你想要的最简单方法。

Play Framework：如何在资产文件中使用反向路由？

1 个答案: