angularJS $ broadcastと$ on

Question

$ブロードキャストを初期化段階で$ onに伝播させる方法はありますか？

 

<div ng-app='test'> 
    <div ng-controller='testCtrl'> <span>{{testContent}}</span> 
    </div> 
    <div ng-controller="testCtrl2"> 
     <input type='text' ng-change="updateContent()" ng-model="testContent2" /> 
    </div> 
</div> 

var app = angular.module('test', []); 
app.factory('sharedContent', function ($rootScope) { 
    var standardContent; 
    var resizeProportion; 
    return { 
     setStandardContent: function (newStandardContent) { 
      standardContent = newStandardContent; 
      $rootScope.$broadcast('updateContent'); 
      console.log('broadcast'); 
     }, 
     getStandardContent: function() { 
      return standardContent; 
     }, 
     setResizeProportion: function (newResizeProportion) { 
      $rootScope.$broadcast('updateResizeProportion'); 
     }, 
    } 
}); 
app.run(function (sharedContent) { 
    sharedContent.setStandardContent('haha'); 
}); 

function testCtrl($scope, sharedContent) { 
    $scope.testContent; 
    $scope.$on('updateContent', function() { 
     console.log('receive'); 
     $scope.testContent = sharedContent.getStandardContent(); 
    }); 
} 

function testCtrl2($scope, sharedContent) { 
    $scope.testContent2 = 'test'; 
    $scope.updateContent = function() { 
     sharedContent.setStandardContent($scope.testContent2); 
    }; 
} 

サンプルフィドル：http://jsfiddle.net/jiaming/NsVPe/

スパンがNG変化関数に起因する入力の変化、などの値を表示します。

ただし、初期化フェーズでは、値「haha」は$ scope.testContentに伝播されず、最初の実行時には何も表示されませんでした。最初の実行時に "haha"という値を表示させる方法はありますか？

ありがとうございます。

Answer 1

ng-changeは、testContent2で識別されるモデルのその後の変更時にトリガされるためです。コントローラが初期化されると、値 "test"が割り当てられます。 ng-changeはその後の変更を追跡します。最初の割り当てはこれに該当せず、その後の変更だけが行います。

http://jsfiddle.net/vZwy4/ - 私はあなたから提供されたフィドルを更新しました。ここでは、spanタグにデータが正しく入力されていることがわかります。

ng-changeを使用する代わりに、スコープの$watch機能を使用する必要があります。入力ボックスからng-change指示文を削除し、updateContentメソッドを削除してください。

$scope.$watch('testContent2', function() { 
    if ($scope.testContent2 === undefined || $scope.testContent2 === null) { 
     return; 
    } 

    sharedContent.setStandardContent($scope.testContent2); 

}); 

あなたは今、単語「テストは」（私は「笑」とは何かを見つけることができなかった）ことを見ることができますが表示されます：あなたはtestContent2モデルへの変更を監視し、前記代わりに、次のコードに置き換えページが読み込まれる瞬間。その後の入力の変更もspanで更新されます。これがあなたが探していたものだと願っています。

Answer 2

コントローラの初期化時により前にが実行されたことを考慮していないことを考慮してください。ブロードキャストされたメッセージはバッファされず、メッセージが作成された瞬間にリスンしているリスナーにのみ配信されるため、hahaの値は失われます。あなたのケースでは

が、しかし、それはそれはあなたのコントローラの小さな変化で動作させるためには非常に簡単です：

function testCtrl($scope, sharedContent) { 
    updateTestContent(); 
    $scope.$on('updateContent', updateTestContent); 

    function updateTestContent(){ 
    $scope.testContent = sharedContent.getStandardContent(); 
    } 
} 

私はここで、各機能（実行コンソール上で見ることができるhttp://jsfiddle.net/y3w5r01d/2/をごJSFiddleをフォークおよびコントローラー）が実行されます。

Answer 3

ちょうど$timeout機能を使用して少し遅延を提供してください。工場でコードを更新するだけで作業が開始されます。

工場については、以下のコードを参照してください：

app.factory('sharedContent', function ($rootScope,$timeout) { 
    var standardContent; 
    var resizeProportion; 
    return { 
     setStandardContent: function (newStandardContent) { 
      standardContent = newStandardContent; 
      $timeout(function(){ 
       $rootScope.$broadcast('updateContent'); 
      },0) 
      console.log('broadcast'); 
     }, 
     getStandardContent: function() { 
      return standardContent; 
     }, 
     setResizeProportion: function (newResizeProportion) { 
      $rootScope.$broadcast('updateResizeProportion'); 
     }, 
    } 
});