AngularJS Chrome 应用程序和 Android 'webview' 标签的指令

Question

我正在更改现有的 Chrome 打包应用程序以使用 Angular。到目前为止它运行良好，但我不确定如何从 Angular 外部更新 UI，例如响应 Chrome 事件。

例如，我有一个 webview，它的当前地址是用 loadCommit 监视的。这里只是简化的代码：

HTML片段：

<p>Current url = {{url}}</p>

控制器：

app.controller('MainController', function($scope) {
    // This is the inital url
    // It shows up in the HTML fragment
    $scope.url = "http://whosebug.com";
});

事件侦听器：

webview.addEventListener('loadcommit', function() {
  url = webview.src;
  //How to update Angular framework with current value of url?
}

如何访问控制器的 url 变量，以便 UI 反映更改？简单地引用控制器中的全局变量是行不通的，例如：

$scope.url = url;

Answer 1

使用$apply.

来自文档：

$apply([exp]);

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

-- AngularJS $rootScope API Reference -- $apply

更新

AngularJS 功能应通过使用 AngularJS 指令添加到 webview 标签。

HTML

<div ng-controller="MainController">
    <webview current-src="url" id="foo" 
             src="http://whosebug.com/"
             style="width:640px; height:480px">
    </webview>

    <p>Current url = {{url}}</p>
</div>

指令

app.directive("webview",function() {
    return {
        restrict: "E",
        link: function(scope,elem,attrs) {
            var webview=elem[0];
            elem.on("loadcommit", function(e) {
                $scope.$apply(attrs.currentSrc +'='+ webview.src);
            });
        }
    };
});

示例指令添加了一个 loadcommit 侦听器，它将 current-src 属性定义的范围变量设置为 [=17= 的 src 属性的值] 标签。

AngularJS Chrome 应用程序和 Android 'webview' 标签的指令

AngularJS Directives for Chrome App and Android 'webview' Tags

angularjs

google-chrome-app

angularjs-directive

`$apply([exp]);`

更新