angularjs - 将服务器端参数传递给 AngularJS 指令

Question

我需要从服务器端向 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>

Answer 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]

如果不想使用link，可以加载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