Question

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

直接在角度页面上，一切都很完美。但是，当我试图跨越C＃和JS之间的差距时，它部分失败了。当我从C＃中解除呼叫时，警报窗口仍会出现，report_type的值似乎在警告框中发生变化。但是，在ng-switch中，没有更新任何内容。当从C＃中调用调用时，我几乎没有访问正确的范围......但如果是这种情况，角度范围内的方法不应该从C＃调用。

在C＃中，我称之为：

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

在提供的网页上：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

找到解决方案。似乎在外部调用JS函数时，通常需要使用$apply来确保允许双向绑定的角度后面的“魔法”继续生效。

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

我做的实际代码更改是：

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

麻烦连接cefsharp浏览器与南希托管角度web应用程序

1 个答案: