difficulté à se connecter navigateur cefsharp avec application web angulaire hébergé par nancy

Question

J'ai un navigateur chromé Cefsharp et une simple application web hébergée avec Nancy sur un port local intégré dans une application wpf. Je voudrais utiliser angulaire avec mon application web, mais j'ai du mal à changer les variables à l'intérieur de la portée angulaire.

Directement sur la page angulaire, tout fonctionne parfaitement. Cependant, quand j'essaie de franchir l'écart entre C# et JS, il échoue partiellement. Lorsque je renvoie l'appel de C#, les fenêtres d'alerte apparaissent toujours et la valeur de report_type semble changer dans la zone d'alerte. Cependant, dans le ng-switch, rien n'est mis à jour. C'est presque comme si je n'accédais pas à la portée correcte lors du déclenchement de l'appel à partir de C# ... mais si c'était le cas, les méthodes dans la portée angulaire ne devraient pas être appelables à partir de C#.

en C#, j'appelle ceci:

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

Sur la page Web affichée:

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

trouvé une solution. Il semble que lorsque vous invoquez une fonction JS à l'extérieur, il peut souvent être nécessaire d'utiliser $apply pour vous assurer que la «magie» derrière l'angle qui permet les liaisons bidirectionnelles continue à prendre effet.

Cet article a été très utile pour moi: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Le changement de code réel que j'ai fait était le suivant:

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