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

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://stackoverflow.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() 用于从 Angular 框架外部执行 Angular 表达式。 （例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。因为我们正在调用 Angular 框架，所以我们需要执行 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://stackoverflow.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 属性定义的范围变量设置为webview 标记的src 属性的值。