将数据从 C# 传递到 angular js html

Question

我正在使用仅显示网页的 CefSharp 构建应用程序。我只想知道我们如何将数据从我的 C# 应用程序（使用 CefSharp）传递到包含 angularjs 控制器的 html？

例如，如果我的数据是硬编码的，它将如下所示：

MainController.js:

app.controller('MainController', ['$scope', function($scope) { 
 $scope.qnumbers = [  // hardcoded data
  {
      counter : 'A',
      number : '3456'
  },
  {
      counter : 'B',
      number : '1234'
  },
  {
      counter : 'C',
      number : '7890'
  },
  {
      counter : 'D',
      number : '1122'
  },
  {
      counter : 'E',
      number : '6677'
  },
  {
      counter : 'F',
      number : '5656'
  },
 ]; 
  }]);

那么我的html会是这样的：

                <div class="reg" ng-repeat="qnumber in qnumbers">
                   div class="u1">{{qnumber.counter}}</div>
                   <div class="u2">{{qnumber.number}}</div>
                </div>

如果现在我的数据不是硬编码而是来自我的 C# 应用程序怎么办，我将如何在我的 html 中写入？我们如何将数据传递到 MainController？

Answer 1

$scope 是完全私有的，不能从 MainController 代码之外直接访问。要将数据放入 $scope，您必须从内部发起请求，就像 $http.get 一样。您可以使用 ng-init 在页面初始加载时从服务器向 angular 脚本提供值，但之后您需要在范围内工作。

绑定到函数

您可以通过绑定到一个本身请求新数据的函数来反转它。为此 "properly"¹ 您需要创建一个获取 qnumbers 的服务并将该服务注入您的控制器。我在这里提供了一个示例，说明如何在没有服务的情况下进行操作。您的 HTML 将是

            <div class="reg" ng-repeat="qnumber in getQnumbers()">
               div class="u1">{{qnumber.counter}}</div>
               <div class="u2">{{qnumber.number}}</div>
            </div>

你的 angular 会是

app.controller('MainController', ['$scope', function($scope) { 
    $scope.getQnumbers = function() {
        return window.cefSharpQnumbers;
    };
}]);

然后在您的 EvaluateScriptAsync 脚本中将结果存储到 window.cefSharpQnumbers。

$watch

与上述方法类似，但您的 angular 代码使用普通绑定，并且您在范围内创建一个 $watch 以在非范围项更改时更新您的范围。 $watch 代码确实属于服务或指令（如上所述）。

app.controller('MainController', ['$scope', function($scope) { 
    $scope.$watch("window.cefSharpQnumbers", function(newValue, oldValue) {
        $scope.qnumbers = window.cefSharpQnumbers;
    });
}]);

警告：此方法可能会导致您的屏幕在更新 qnumbers 时 "jump" 一点点。

原始 ng-init 示例

使用ng-init。您在初始化代码中包含的任何值都将在您的范围内设置为属性。

你的代码应该是这样的

<div ng-controller="MainController"
     ng-init="{
         myVar1: @Model.Var1,
         myStringVar: '@Model.StringVar'
     }"
>

这将使您可以访问控制器中的 $scope.myVar1 和 $scope.myStringVar。请注意，ng-init 在调用控制器函数后运行 ，因此您不能直接在控制器函数中使用这些值。

¹ 像这样在控制器和 window 之间建立直接连接会破坏 angular 的模块化。使用服务将使模块化回归。这使得代码更易于管理和测试。

Answer 2

查看此文档How do you call a Javascript method from .NET?

如果你成功使用它，你可以做任何你想做的事。例如，在一个全局变量上设置一个 $scope.$watch，比方说 qnumber.updated，然后在触发手表后使用 C# 代码传递的数据更新 $scope.qnumbers。

请注意，在 angular 之外更改全局变量后，您将必须手动触发摘要过程。

示例：

angular.module('app', [])
  .controller('Main', function($scope) {
    $scope.$watch(function() {
      return window.qnumbers;
    }, function(data) {
      $scope.qnumbers = window.qnumbers || 'default';
    });
  });

您可以执行以下命令来触发此手表。

window.qnumbers = [1,2,3];
angular.element(document.getElementById('ctrl')).scope().$apply();
// ctrl is the id of you controller container

以这个link为例，尝试在控制台中执行上面的命令。您可以在 EvaluateScriptAsync 方法中执行相同的操作 http://codepen.io/anon/pen/wGzXKv

将数据从 C# 传递到 angular js html

Passing data from C# to angular js html

javascript

c#

html

angularjs

cefsharp