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

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 param我想传递给指令，以便在模板URL中使用它，如下所示：

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

P.S：

我会this codepen example来表明我的需要：

＆＃13;

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>'
  };  
});

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，您希望根据templateUrl创建动态 attr.lang。

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

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

Answer 2

您不能在申请指令$scope上使用ng-app，但可以使用$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>

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

P.S：

2 个答案:

AngularJS应用程序：

查看：

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