Problem beim Verbinden von Cefsharp Browser mit Nancy gehostet eckigen Web-App

Question

Ich habe eine Chrom-Browser und eine einfache Web-Anwendung gehostet mit Nancy auf einem lokalen Port in eine WPF-Anwendung gebaut. Ich möchte eckig mit meiner Webanwendung verwenden, aber ich habe Mühe, Variablen im Winkelbereich zu ändern.

Direkt auf der eckigen Seite funktioniert alles perfekt. Wenn ich jedoch versuche, die Lücke zwischen C# und JS zu schließen, scheitert es teilweise. Wenn ich den Anruf von C# abbringe, erscheinen die Alarmfenster weiterhin und der Wert report_type scheint sich in der Alarmbox zu ändern. In der ng-switch wird jedoch nichts aktualisiert. Es ist fast so, als ob ich nicht auf den richtigen Bereich zugreife, wenn ich den Aufruf von C# abrufe ... aber wenn das der Fall ist, sollten die Methoden im eckigen Bereich nicht von C# aufgerufen werden können.

in C#, ich das nennen:

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

auf der gedienten Webseite:

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

eine Lösung gefunden. Es scheint, dass beim externen Aufruf einer JS-Funktion oft $apply verwendet werden muss, um sicherzustellen, dass die "Magie" hinter dem Winkel, die 2-Wege-Bindungen ermöglicht, weiterhin wirksam wird.

Dieser Artikel war sehr hilfreich für mich: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Die eigentliche Codeänderung ich das gemacht war:

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