는 AngularJS와 컨트롤러는 PostMessage를 이벤트를 만날 때

I이 AngularJS와 및 메시지 리스너 사용하는 다음 코드 : JSBin : 영향을 input 또는 textarea에 변경 :는 AngularJS와 컨트롤러는 PostMessage를 이벤트를 만날 때

<!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 및 span. 전역 변수 prefix도 항상 input 또는 textarea의 내용에 접두사를 추가하고 span에 표시합니다.

사례를 복잡하게 만드는 요소는 수신기입니다. 다른 웹 페이지는이 웹 페이지에 새로운 접두사를 보낼 것입니다 (미안하지만 여기에 테스트를 표시 할 수 없습니다). 현재 페이지에 새로운 접두사가 수신되면 함수 범위로 인해 render을 호출 할 수 없으므로 span은 새 접두어로 새로 고쳐지지 않습니다. 제가 알고 싶은 것은, 페이지가 새로운 접두어를 받으면 span을 새로운 접두어로 체계적으로 새로 고칩니다.

아무도 이것을 실현하는 방법을 알고 있습니까?

출처

2016-12-08 SoftTimur

질문에 더 정확하게 답할 수 있습니까? 혼란 스럽습니다. – Aravind

두 페이지의 상호 작용을 JSBin으로 표시하기 어렵습니다. 그것을 제외하면 어떤 부분이 당신을 혼란스럽게합니까? – SoftTimur

각 스크립트 테스트

에 대한

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

$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 + 스크립트를 사용하여 - 이것은 당신이 우리에게 알려 주시기 바랍니다 원하는 것을하지 않으면

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

합니다.

출처

2016-12-09 00:00:49 Searching

그것은 작동합니다 ... 단지'receiveMessage'의 끝에'render()'를 추가해야합니다 ... – SoftTimur

@SoftTimur true ..하지만'$ watch ('name'..' ? – Searching

내가 원하는 것은'TEST' 버튼을 클릭하면 체계적으로 새 접두사로 시스템을 새로 고칩니다. – SoftTimur

는 AngularJS와 컨트롤러는 PostMessage를 이벤트를 만날 때

답변

관련 문제