角度時計の問題

私がAngularの時計機能を使用しているのは初めてですが、それはうまく動作しません。 myFileという変数を持つapiServiceというサービスがあります。私は自分のコントローラにサービスを注入しており、変更のためにapiService.myFileの値を見たいと思っています。残念ながら、apiService.myFile変数が実際に変更されたときではなく、ウェブページを開くときにのみ時計が呼び出されます。時計のコードは次のとおりです。myFileが変更されたときに、なぜ呼び出されないのですか？角度時計の問題

UPDATE 1：これは私がサービス

ApiService.prototype.uploadFile = function(fileContent) { 
    $.ajax({ 
     url: "/space_uploadFile/", 
     type: "POST", 
     dataType: "json", 
     data: { 
      fileContent: fileContent 
     }, 

     contentType: "application/json", 
     cache: false, 
     timeout: 5000, 
     complete: function() { 
      //called when complete 
      console.log('process complete'); 
     }, 
     success: function(data) { 
      this.myFile =data; 
      console.log("this.myFile: "+this.myFile); 
      console.log('process success'); 
     }, 
     error: function() { 
      console.log('process error'); 
     }, 
     }); 

};

出典

2016-09-20 suMi

最後に 'true 'を追加して深い監視'}、true）;' – cjmling

'apiService.myFile'のデータ型は何ですか？ –

@cjmling trueを追加しても助けにならなかった – suMi

私はこれをplunkrの中に追加しました（あなたはそうしていませんでした）。これは私のために働いています：

Sidenote：次回は、問題の例（plunkr）を作成して、問題の原因を取り除くことができます。打ち間違え）。

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

app.controller('mainController', function($scope, apiService) { 

    $scope.changeValue = function() { 
    apiService.myFile += "!"; 
    }; 

    $scope.$watch(function(){return apiService.myFile}, function (newVal, oldVal, scope) { 
    console.log("service changed: "+newVal +" : "+oldVal+" : "+ scope); 
    $scope.someValue = newVal; 
    }); 
}); 

app.service('apiService', function() { 
    this.myFile = "Test"; 
});

と、対応するHTML：

<body ng-controller="mainController"> 
    <h1>Hello Plunker!</h1> 
    {{someValue}} 
    <button ng-click="changeValue()">Click</button> 
</body>

https://plnkr.co/edit/DpDCulalK1pZ8J0ykh2Z?p=preview

がところで：$時計部分は、あなたの質問からのコピーであり、それは単に私のために動作します。

編集：OPさんはajaxコールを実行するために$ .ajaxを使用していましたが、値はsucceshandler内で更新されました（Angularコンテキスト外）。そこで、ここでトリガされたダイジェストサイクルはありませんでした。これを修正するには、角度で提供される$ httpサービスを使用する必要があります

var self = this; 
self.$http.post("/space_uploadFile/", 
{ fileContent: fileContent }, 
{ 
    cache: false, 
    timeout: 5000 
}) 
.then(function (data) { 
    self.myFile = data; 
    console.log("self.myFile: " + self.myFile); 
    console.log('process success'); 
}, 
function() { 
    console.log('process error'); 
});

EDIT2：Apparantly OPは、コントローラに変数をアクセスもするsucceshandlerにthisを用いました。これはうまくいかないので、上記のサンプルで自己パターンを使用して解決しました。

出典

2016-09-20 06:22:11

それは単に私のコントローラで何かが間違っている場合は、あなたのために動作します。サービスのプロトタイプの中で私のAjaxコールを行うことができますか？ 'ApiService.prototype.uploadFile = function（fileContent）{ \t $ .ajax（{...}）;};' – suMi

$ .ajaxの代わりに$ httpを使用します。 $ .ajaxを使ってAngular Contextを残しているので、succeshandler内部で起こった変更は角度のダイジェストサイクルを引き起こさないでしょう。 –

サービス内の変数を実際に変更しているコードを追加しました – suMi

-3

内apiService.myFileの値を更新する方法である私は、この構文を使用しています：

名前はプロパティの名前です

scope.$watch('name', function(newValue, oldValue) { 
    scope.counter = scope.counter + 1; 
});

- この場合myFile

出典

2016-09-20 06:15:29 Nils

これはスコープのプロパティに対してのみ機能します。 OPはこれを望んでいません。彼はサービスの財産を見たいと思っています。 –

それは複写であるかもしれません：http://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variables – Nils

答えは角度の時計を使用するのではなく、何か他のものですか？ – suMi

答えて

関連する問題