【问题标题】：Pass a server side parameter to AngularJS directive将服务器端参数传递给 AngularJS 指令
【发布时间】：2017-09-04 08:47:23
【问题描述】：

我需要将一个变量从服务器端传递给 AngularJS。

我在服务器端有以下 HTML

<div ng-app="tablesApp" ng-controller="tablesCtrl" ng-init="lang='@lang';...go();" ...>
    <st-date-range ?lang="@lang"? ...> </st-date-range>
...
</div>

我应该在 HTML 代码中的某个位置（实际上是在 ng-init，但如果有其他选项我可以接受）我的服务器端 @lang 值，那么 Angular 应该使用该值......

我使用一个指令，我想将@lang（服务器端 ASP.NET razor 变量）参数传递给 angular，以便在模板路径中使用它：

app.directive('stDateRange', [function () {
    return {
        restrict: 'E',
        require: '^stTable',
        templateUrl: '/templates/stDateRange.en.html',
        scope: false,
        link: function (scope, element, attr, ctrl) {
            var tableState = ctrl.tableState();
            scope.$watchGroup(["minDate", "maxDate"],
                function (newValues, oldValues) {

所以，我的服务器端 @lang 参数我想传递给指令以便在模板 URL 中使用它，如下所示：

templateUrl: '/templates/stDateRange.@(lang).html'

附注：

我会用this codepen example 来表达我的需要：

var app = angular.module('app', []);

app.directive('testDirective', function(){
  var lang = 'en'; // <<< Set the variable HERE << !!!
  return {
   restrict: 'E',
   template: '<p>my lang  is "<strong>'+lang+'</strong>" </p>'
  };  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app" ng-init="lang='fr'">
  <h3>Test directive for 'fr' lang</h3>
  <test-directive></test-directive>
</section>

【问题讨论】：

标签： angularjs internationalization

【解决方案1】：

如果我没听错的话，你想动态在attr.lang的基础上创建templateUrl。

所以我会把你的指令写成：

app.directive('stDateRange', [function () {
    return {
        restrict: 'E',
        require: '^stTable',
        template: '<ng-include src="getTemplateUrl()"/>',
        scope: false,
        link: function (scope, element, attr, ctrl) {

         scope.getTemplateUrl = function () {
           var url = '/templates/stDateRange.' + attrs.lang + '.html' 
           return url;
         };

            var tableState = ctrl.tableState();
            scope.$watchGroup(["minDate", "maxDate"],
                function (newValues, oldValues) {

和 HTML 调用：

<test-directive lang="{{lang}}"></test-directive>

Demo Plunker

[编辑 1]

如果不想使用链接，可以加载constant：

app.directive('testDirective', function(Constants){
  var lang = Constants.val;
  return {
   restrict: 'E',
   template: '<p>my lang  is "<strong>'+lang+'</strong>" </p>'
  };  
});

app.constant('Constants', {
    val: 'Fess'
});

Demo Codepen

【讨论】：

有趣的方法，谢谢！我用 codepen 示例更新了 OP，使其更具体......
@Serge 看看我发布的演示
我明白了...我想知道是否有可能在我发布的示例中直接在指令var lang = 'en'; => var lang = myLangParam; 中进行修改
@Serge 在您的演示中，您尝试修改静态 HTML，但您发布的问题是您使用 html 文件\
来自我的经验。它不可能通过角度方式做到这一点。

【解决方案2】：

您不能在应用程序指令ng-app 上使用$scope，但可以使用$rootScope。我将通过将$root.language 解析到您的指令中来实现这一点，最后动态加载模板。您也可以直接在指令中访问$rootScope.language，而无需将$root.language 解析到其中。您可以随心所欲 - demo punkr。

AngularJS 应用程序：

var app = angular.module('plunker', []);


app.controller('ApplicationController', function($scope) {}); 


app.directive('test', function ($http, $compile) {
  return {
        scope: {
          lang: '='
        },
        restrict: 'E',
        link: function(scope, element) {
            $http.get('./template.'+ scope.lang +'.html').then(function (result) {
              scope.test = 'some test';
              element.html(result.data);
              $compile(element.contents())(scope);
            });
        }
    };
});

查看：

<!doctype html>
<html ng-app="plunker" ng-init="language = 'en'">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div class="container">
      <div class="row">
        <test lang="$root.language"></test>
      </div>
  </div>
</body>
</html>

包含您的服务器端参数的模板：

<!doctype html>
<html ng-app="plunker" ng-init="language = '@lang'">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div class="container">
      <div class="row">
        <test lang="$root.language"></test>
      </div>
  </div>
</body>
</html>

【讨论】：

是否可以在指令函数的早期传递参数，就像在我更新了 OP 的 codepen 中一样？
@Serge 是的，不，ng-app 是一个应用程序指令，它不支持 scopes / e2e binding -> 这是不可能的。我更新了我的答案并添加了ApplicationController。这应该对你有帮助。
@Serge 顺便说一句。为什么需要在视图中使用ng-init 定义语言？
You need a controller to make that work. 为什么不呢？它将存储在 rootScope 下。请在 Plunker 中查看我的演示
@Serge 我刚刚更新了这个答案。这应该符合您的所有要求。谢谢马克西姆+