Question

我的cshtml文件中有一个布尔变量。当我尝试将它传递给我的Angular指令时，它被收到“False”而不是“false”。如果我将其硬编码为“假”（小写），它也不起作用。

我的cshtml文件：

@{
    var myVar = false;
}

<some-directive test="@myVar"></some-directive>

我的测试指令是这样的：

angular.module('someApp')
  .directive('someDirective', function () {
      return {
          restrict: 'E',
          scope: {
              test: '@'
          },
          link: function ($scope, element, attrs) {

              console.log($scope.test) // False
              console.log(!$scope.test) // false
              console.log(!!$scope.test) // true
          }
      }
  });

Answer 1

您可以找到部分答案here。

特别是对于Angular，请将指令变量用作test: '='而不是test: '@'。这样，您的变量将被解析为布尔，其值为“false”，而不是文本“false”。

此外，在您的Razor文件中，请尝试以下操作将“False”转换为“false”：

@{
    var myRazorVar = false;
}

<some-directive test="@myRazorVar.ToString().ToLower()"></some-directive>
@* or *@
<some-directive test="@Json.Encode(myRazorVar)"></some-directive>

Answer 2

由于两种语言区分大小写并且使用不同的布尔模式（即使对于数字），您可以使用：

<some-directive test="@Json.Encode(myVar)"></some-directive>

将C＃数据格式化为javascript。

Answer 3

你的范围应该是'='而不是'@'

angular.module('someApp')
  .directive('someDirective', function () {
      return {
          restrict: 'E',
          scope: {
              test: '='
          },
          link: function ($scope, element, attrs) {

              console.log($scope.test) // false
              console.log(!$scope.test) // true
              console.log(!!$scope.test) // false
          }
      }
  });

如何将Razor布尔变量传递给Angular指令？

3 个答案: