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

Question

我有一个Cefsharp Chromium浏览器，并与Nancy建成一个WPF应用程序的本地端口上承载一个简单的Web应用程序。我想用角与我的web应用程序，但我在努力改变角度范围内的变量。

直接角页面上，一切都完美的作品。但是，当我尝试跨越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();"); 
} 

所供应的网页：

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，以确保“魔术”背后的角度，允许双向绑定继续生效。

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

的实际代码改变我做的是：

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