AngularJSサービスでTextAreaの値を取得

Question

私はサービス内のメソッドを起動するビュー内でボタンを押すと、コントローラ/ビューでサービスを使用しています。このサービスは、そのビュー内のTextAreaの値にアクセスする必要があります。

現在、私は持っている：サービス内

：ビュー内の

cancelClick: function() { 
    console.log(angular.element('commentText').val()); 
}, 

そして：

<textarea class="cancel-comment form-control" rows="8" id="commentText" placeholder="Notes" x-ng-model="cancelNotes"></textarea> 

<div class="text-center"> 
    <button type="button" class="btn btn-danger btn-cancel" id="cancel-order" ng-click="orderService.cancelClick()">{{'CANCEL THIS ORDER' | translate}}</button>     
</div> 

Now]ボタンをクリックすると、しかしconsole.log印刷undefinedを進めています。

ビューから値を取得する正しい方法は何ですか？

Answer 1

commentText is Id

cancelClick: function() { 
     console.log(angular.element('#commentText').val()); 
    }, 

Answer 2

角度サービスでは、アクセスしたり、DOMオブジェクトを操作したりすることはできません。代わりに、あなたのコントローラとビューに結合し、そして今でも保存/あなたのサービスを使用してテキストを操作することができます。

The Plunker

マークアップ

<div class="form-group"> 
    <h3 class="text-success">Test Area</h3> 
    <textarea class="form-control" rows="8" id="commentText" placeholder="Notes" ng-model="mainCtrl.text"></textarea> 
    </div> 

    <button type="button" class="btn btn-success" ng-click="mainCtrl.saveToLocalStorage()">Save Changes</button> 

JS

var app = angular.module('plunker', []); 

app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) { 

    var myCtrl = this; 

    myCtrl.text = angular.copy(tempDataStorageService.text); 

    myCtrl.localStorage = tempDataStorageService; 

    myCtrl.saveToLocalStorage = function() { 
     tempDataStorageService.text = angular.copy(myCtrl.text); 
    } 

}]); 


app.factory('tempDataStorageService', function() { 
    // The service object 
    var storage = this; 

    storage.text; 

    // return the service object 
    return storage; 
});