使用带有angularjs的web浏览器控件

时间:2014-07-30 08:23:20

标签: javascript angularjs webbrowser-control

尝试以下操作:

(a)在winform中嵌入一个Web浏览器控件。

(b)通过在JS中调用方法将字符串数据从winform控件传递到webbrowser。

这个JS方法进一步调用angularJS控制器。通话成功。但是,视图中使用的控制器不会更新。

以下代码段:

调用side C#winform代码段:

string testString = "testing";
webBrowser2.Document.InvokeScript("InvokeJSPassingTestString", new object[] { testString });

HTML方面。     

<html ng-app="ManagerApp">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script type="text/javascript">
        var angularApp = angular.module('ManagerApp', []);
        angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {
            $scope.customParams = {};
            $scope.updateCustomRequest = function (data) {
                $scope.customParams.value = data;
                alert("$scope.customParams.value :" + $scope.customParams.value);
            };
        }]);

        function InvokeJSPassingTestString(data) {
            var dom_el = document.querySelector('[ng-controller="ManagerCtrl"]')
            var ng_el = angular.element(dom_el);
            var ng_el_scope = ng_el.scope();
            var test = ng_el_scope.updateCustomRequest(data);
        }
    </script>
</head>
<body ng-controller="ManagerCtrl">
    Passed parameter from winform to JS to angularJs is as below:
    {{ customParams.value }}
</body>
</>

在上面的代码段中 - 我收到提醒但视图{{customParams.value}}没有得到更新。

赞赏任何投入。

1 个答案:

答案 0 :(得分:1)

您的代码在angularjs摘要周期之外运行,因此您需要在更改数据后开始新的摘要周期

$scope.updateCustomRequest = function (data) {
    $scope.$apply(function () {
        $scope.customParams.value = data;
        alert("$scope.customParams.value :" + $scope.customParams.value);
    });    
};

How to update bindings