AngularJSコントローラはのpostMessageイベント

を満たしている場合、私はAngularJSとメッセージリスナを使用して、次のコードを有する：JSBinを：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に変更が影響を与えますinput,textareaおよびspanである。私はグローバル変数prefixも持っていて、内容は常にinputまたはtextareaという接頭辞を付けてspanに表示します。

リスナーがこのケースを複雑にします。別のWebページからこのWebページに新しいプレフィックスが送信されます（申し訳ありませんが、ここではテストを表示できませんでした）。現時点では、ページが新しいプレフィックスを受け取ると、機能範囲のためにrenderを呼び出すことができません。その結果、spanは新しいプレフィックスで更新されません。私が気づいてほしいのは、ページが新しい接頭辞を受け取ると、spanを新しい接頭辞で体系的にリフレッシュするということです。

これを実現する方法を知っている人はいますか？

出典

2016-12-08 SoftTimur

あなたの質問にもっと正確に答えることができますか？それはたくさんのことを混乱させます – Aravind

JSBinとの2つのページのやりとりを示すのは難しいです。それ以外は、あなたを混乱させる部分は？ – 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イベント

答えて

関連する問題