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

Question

我在我的cshtml文件中有一个布尔类型变量。当我尝试将它传递给Angular指令时，它被接收为"False"而不是"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
          }
      }
  });

- rajesh

Answer 1

您可以在此链接中找到部分答案。

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

- Zanon

---

如果您正在使用返回True或False的函数，那么我也可以使用上述代码：<my-directive my-boolean="@MyFunctionReturnsTrue().ToString().Tolower()"></my-directive> - Mattkwish

它确实可以工作，但需要将其转换为字符串，然后再转换为小写字母，以使指令理解它是一个布尔值，这似乎很奇怪。肯定有一种方法可以直接发送布尔值吧？即使六年后，这仍然不是一件容易的事情！ - Dermo909

Answer 2

由于这两种语言对大小写敏感并使用不同的布尔模式（即使对于数字也是如此），因此您可以使用以下方法：

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

将C＃数据格式化为相应的javascript。

- Anupam Singh

---

然而，我非常确定你也需要使用=绑定。使用@会将布尔值视为字符串。 - Zanon

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

- Venkat

Answer 4

我这样做成功了：

let replicateReopeningClientFiles = @Json.Serialize(Model.ReplicateReopeningClientFiles);

- Leniel Maccaferri