c# - 将 cefsharp 浏览器与 nancy 托管的 Angular 网络应用程序连接时遇到问题

Question

我有一个 Cefsharp Chromium 浏览器和托管在 Nancy 上的简单 Web 应用程序在 wpf 应用程序内置的本地端口上。我想在我的 Web 应用程序中使用 Angular ，但我正在努力更改 Angular 范围内的变量。

直接在 Angular 页面上，一切正常。然而，当我试图跨越 C# 和 JS 之间的鸿沟时，它部分失败了。当我从 C# 触发调用时，警报窗口仍然出现，并且 report_type 的值确实在警报框中发生变化。但是，在 ng-switch 中，没有任何更新。这几乎就像我在从 C# 中触发调用时没有访问正确的范围一样......但如果是这样的话， Angular 范围中的方法不应该从 C# 中调用。

在 C# 中，我称之为:

private void GIS_Button_Click(object sender, RoutedEventArgs e)
{
    this.report_browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("ext_switch_gis();");
}

在服务的网页上:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.switch_gis = function switch_gis() {
    alert("begin switch gis");
    $scope.report_type = "gis";
    alert("end switch gis");
    alert("report value is: " + $scope.report_type);
  }

  $scope.switch_bar = function switch_bar() {
    alert("begin switch bar");
    $scope.report_type = "bar";
    alert("end switch bar");
    alert("report value is: " + $scope.report_type);
  }

  $scope.mytest = function mytest(words) {
    alert(words);
  }

  $scope.switch_bar();
});

function ext_switch_gis() {
  var outside_scope = angular.element(document.getElementById('myAppDiv')).scope();
  outside_scope.mytest("Beginning of external js call!");
  outside_scope.switch_gis();
  outside_scope.mytest("End of external js call!");
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="myAppDiv" ng-app="myApp" ng-controller="myCtrl">
  <div id="report_switch_div" ng-switch="report_type">
    <div ng-switch-when="bar">
      <h1>bar</h1>
    </div>
    <div ng-switch-when="gis">
      <h1>gis</h1>
    </div>
    <div ng-switch-default>
      <h1>Select a report type</h1>
    </div>
  </div>

  <button ng-click="switch_gis()">gis test</button>
  <button ng-click="switch_bar()">bar test</button>
</div>

Answer 1

找到解决方案。似乎在外部调用 JS 函数时，可能经常需要使用 $apply 来确保允许 2 种方式绑定(bind)的 angular 背后的“魔法”继续生效。

这篇文章对我很有帮助:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

我所做的实际代码更改是这样的:

$scope.switch_gis = function switch_gis() {
    $scope.$apply(function () {
       $scope.report_type = "gis";
    });
}