Question

我使用仅显示网页的CefSharp构建应用程序。我只是想知道如何将数据从我的C＃app（使用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

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

如果成功使用此功能，您可以执行任何操作。例如，在一个全局变量上设置$scope.$watch，让我们说qnumber.updated，然后在手表被触发后用C＃代码传递的数据更新$scope.qnumbers。

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

示例：

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

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

Answer 2

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

绑定到函数

您可以通过绑定到本身请求新数据的函数来反转它。要“正确”¹执行此操作，您需要创建一个获取qnumbers并将该服务注入控制器的服务。我在这里提供一个如何在没有服务的情况下做的例子。你的HTML将是

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

你的角度将是

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

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

<强> $表

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

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

警告：当qnumbers更新时，此方法可能会导致屏幕“跳”一点。

原始 ng-init示例

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

您的代码将沿着这些方向

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

这样，您就可以访问控制器中的$scope.myVar1和$scope.myStringVar。请注意，{/ 1}在调用控制器函数后运行，因此您无法直接在控制器函数中使用这些值。

¹在控制器和ng-init之间建立直接连接会破坏角度的模块化。使用服务可以恢复这种模式化。这使得代码更易于管理和测试。

将数据从C＃传递到角度js html

2 个答案: