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

角度脚本：使用$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事件时

1 个答案: