当AngularJS控制器遇到postMessage事件

Question

我有以下使用 AngularJS 和消息侦听器的代码：JSBin:

<!DOCTYPE html> 
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="Name"><br>
    <br>
    <textarea id="myText" ng-model="Name"></textarea>
  </div>
  <br>
  <span id="fromQuery"></span>

  <script>
    var prefix = "pre-";
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      function render() {
        document.getElementById("fromQuery").innerHTML = prefix + $scope.Name  
      }

      $scope.Name = "John";

      $scope.$watch('Name', function() {
        render();
      })
    });

    function receiveMessage(event) {
      prefix = event.data;
    }

    window.addEventListener("message", receiveMessage, false);
  </script>
</body>
</html>

AngularJS 定义了一个控制器，它允许同步所有内容：对 input 或 textarea 的任何更改都会影响 input、textarea 和 span。我还有一个全局变量 prefix，它总是为 input 或 textarea 的内容添加一个前缀，并将其显示在 span.

中

使情况复杂化的是听众。另一个网页将向该网页发送新的前缀（抱歉，我无法在此处显示测试）。目前，一旦页面接收到新的前缀，由于函数范围的原因，它不能调用 render，因此 span 不会用新的前缀刷新。我想知道的是，一旦页面收到新前缀，它就会系统地刷新 span 和新前缀。

有谁知道如何实现这个？

Answer 1

angular 脚本：使用 $window

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $window) {
        $scope.prefix = "abc";//if prefix needs to change dynamically why not add it to scope ?
        function render() {
            document.getElementById("fromQuery").innerHTML = $scope.prefix + $scope.Name
        }

        $scope.Name = "John";

        function receiveMessage(event) {
            console.log(event.detail); //just checking
            $scope.$apply(function(){          
                $scope.prefix = event.detail;
             })
            //$scope.prefix = event.detail;
        }

        $window.addEventListener("message", receiveMessage, false);

        $scope.$watch('Name', function () {
            render();
        })
       $scope.$watch('prefix', function() {
        console.log('prefix changed');
       render();
       })
    });

html + 测试脚本

<button type='button' onclick="doo()">TEST</button>

-

function doo() {
    var event = new CustomEvent('message', {
            'detail' : 'MyNewPrefix'
        });
    window.dispatchEvent(event);
}

如果这不是您想要的，请告诉我们。

当AngularJS控制器遇到postMessage事件

When AngularJS controller meets postMessage events

javascript

postmessage

angularjs