Angular / Chrome 扩展 - 收到回调时更新视图答案

【问题标题】：Angular / Chrome extension - Update view when callback receivedAngular / Chrome 扩展 - 收到回调时更新视图
【发布时间】：2018-11-25 22:20:09
【问题描述】：

我正在使用 Angular 开发一个扩展。当控制器加载时，我需要从本地存储中收取信息：

var app = angular.module("Logins");

app.controller("LoginsCtrl", function($scope) {

    chrome.runtime.sendMessage({message: "get_data"}, function(response) {
        $scope.myText = response.value;
    });
});

而且在视图中很简单：

{{ myText }}

如果我使用默认值初始化该值，它会正确显示，当我检查 console.log 时，该值是正确的。但是视图没有刷新。

我看过一些关于 tick()、detectChanges() 的问题，但我不明白如何使用这些函数，角度一直对我说函数未定义。

你能帮帮我吗？

谢谢，

问候，

马丁

【问题讨论】：

你能发布整个组件吗？因为要使用detectChanges，您必须注入ChangeDetectorRef。
我没有实现 changeDetectorRef 因为我不明白如何在我的控制器中使用它。我只是提到了我在网上找到的东西

标签： angular google-chrome message

【解决方案1】：

这里问的是我的完整代码：

popup.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="angular-1.6.9.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
    <div ng-app="Logins" ng-controller="LoginsCtrl">

        {{ myText }}

    </div>
</body>
</html>

这里是 controller.js：

var app = angular.module("Logins");

app.controller("LoginsCtrl", function($scope) {
    var getData = function(response, sender, sendResponse) {
        $scope.myText = response.value;
        console.log($scope.myText);
    };
    chrome.runtime.sendMessage({message: "get_data"}, getData.bind(this));
});

这里是 background.js：

chrome.runtime.onMessage.addListener( function(request,sender,sendResponse) {
    if(request.message === "get_data") {
        sendResponse({value:"toto"});
    } else {
        console.log('Message unknown');
    }
});

所以这是非常基础的。

问候，

马丁

【讨论】：

【解决方案2】：

我找到了答案，我犯了一个错误： $scope.apply() 换了 $scope.$apply()

【讨论】：