angularjs - angular jsのdivにテキストを返す方法

Question

テキスト領域からテキストを表示したい div があります。angularjs でテキスト領域から div にテキストを返す方法。私はangularjsが初めてで、それがどのように機能するかわかりません。助けてください。ありがとう

Answer 1

<textarea data-ng-model="myModel"></textarea>    
<div>{{ myModel }}</div>

これはangularjsの非常に基本的な概念であるため、いくつかのビデオを見ることを本当にお勧めします

Answer 2

@blaster が言ったように、コントローラー間でデータを共有する良い方法は、Angular サービスを使用することです。

実際の例は、このフィドルで見ることができます: http://jsfiddle.net/orlenko/5WhKW/

この例では、2 つのコントローラーを定義します。

<div ng-controller="SourceController">
    <textarea ng-model="message" ng-change="propagate()"></textarea>
</div>
<div ng-controller="DestinationController">
    <div>{{message}}</div>
</div>

SourceController は、サービスを介して DestinationController にデータ変更に関する通知を送信します。

このサービス$rootScope.$broadcastは、更新があることを世界に知らせるために使用します。

myModule.factory('MessageSharing', function ($rootScope, $log) {
    var share = {};

    share.message = '';

    share.broadcast = function (msg) {
        $log.log('broadcasting ' + msg);
        this.message = msg;
        this.broadcastItem();
    };

    share.broadcastItem = function () {
        $log.log('broadcasting  this ' + this.message);
        $rootScope.$broadcast('handleBroadcast');
    };

    return share;
});

宛先コントローラーは、以下を使用して「handleBroadcast」イベントをサブスクライブします$on。

function DestinationController($scope, $log, MessageSharing) {
    $log.log('Initializing DestinationController');
    $scope.message = '';
    $scope.$on('handleBroadcast', function () {
        $log.log('Got the message: ' + MessageSharing.message);
        $scope.message = MessageSharing.message;
    });
}

最後に、SourceController はサービスを介して更新を公開します。

function SourceController($scope, $log, MessageSharing) {
    $log.log('Initializing SourceController');
    $scope.message = '';

    $scope.propagate = function () {
        $log.log('Propagating ' + $scope.message);
        MessageSharing.broadcast($scope.message);
    };
}