2013-06-05 17 views
8

$ブロードキャストを初期化段階で$ 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"という値を表示させる方法はありますか?

ありがとうございます。

答えて

0

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で更新されます。これがあなたが探していたものだと願っています。

+0

をこんにちは、私は実際にアプリケーションの最初の実行時にテキスト「笑」にスパンを初期化する方法を探しています。私は問題は、sharedContent.setStandardContent( 'haha')がapp.run関数で呼び出されたときに、コントローラがまだ作成されていないことだと思います。したがって、最初の実行時に文字列 'haha'がスパンに移入されていません。文字列 'haha'が最初の実行時にスパンに移入されていることを確認するために呼び出すことができる他のメソッドはありますか? – jiaming

+0

@jiaming TestCtrl2自体を "test"に設定するのではなく、 "haha"に設定してみませんか? – callmekatootie

0

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

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

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

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

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

1

ちょうど$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'); 
     }, 
    } 
}); 
関連する問題