2016-09-20 3 views
0

Это первый раз, когда я пользуюсь функцией часов Angular и, по-видимому, я не могу заставить ее работать. У меня есть услуга под названием apiService, которая имеет переменную myFile. Я ввожу сервис в свой контроллер и хочу посмотреть значение apiService.myFile для изменения. К сожалению, часы открывается только при открытии веб-страницы, а не при изменении переменной apiService.myFile. Вот код для часов:Проблема с угловыми часами

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

Почему не его называют, когда myFile изменения?

UPDATE 1: это, как я обновить значение apiService.myFile внутри службы

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'); 
     }, 
     }); 

}; 
+0

попробуйте добавить 'true' в конец для глубокого просмотра'}, true); ' – cjmling

+0

Каков ваш тип данных 'apiService.myFile'? –

+0

@cjmling добавление true не помогло – suMi

ответ

2

Я добавил это внутри 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 ОП был также с использованием this в succeshandler к ACCES переменной на контроллере. Это не сработает, поэтому я использовал шаблон self в приведенном выше примере для его решения.

+0

Если это просто работает для вас, то что-то не так в моем контроллере. Может быть, потому, что я делаю свой вызов ajax внутри прототипа сервиса? 'ApiService.prototype.uploadFile = function (fileContent) { \t $ .ajax ({...]);};' – suMi

+0

Используйте $ http вместо $ .ajax. Поскольку вы покидаете угловой контекст, используя $ .ajax, следовательно, изменения, происходящие внутри succeshandler, не будут вызывать цикл дайджеста углов. –

+0

Я добавил код того, как я фактически изменяю переменную внутри службы. – suMi

-3

я привык к этому синтаксису:

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

где имя этого имя вашей собственности - в этом случае myFile

+0

Это работает только для свойств области. ОП не хочет этого. Он хочет посмотреть имущество службы. –

+0

, то это может быть дубликат: http://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variables – Nils

+0

, так что ответ заключается не в том, чтобы использовать угловые часы, а что-то еще? – suMi

Смежные вопросы