2017-01-03 3 views
1

Для создания/редактирования содержимого веб-сайта У меня есть форма с некоторыми вкладками (кнопки составляют идею системы вкладок, так как пользователь может захотеть добавить еще одну вкладку и т. Д. и т.д.), и я использую директиву, чтобы показать выбранную вкладку:AngularJS - модель области действия не обновляется без отладчика

<form name="form" novalidate> 
    <div class="tabsContainer"> 
     <!--some button making the idea of tabs system--> 
    </div> 

    <div class="contentDataContainer"> 
     <content-form ng-model="VM.CurrentContent" page-features="VM.PageFeatures"></content-form> 
    </div> 
</form> 

Когда пользователь хочет изменить содержание я запроса данных контента к веб-службы: должны обновления

loadData = function() { 
    var deferred = $q.defer(); 

    ContentsService.GetContentToCreateEdit({ id: vm.IdContent }) 
     .then(function(response) 
     { 
      try { 
       if (vm.IdContent <= 0 || (response.ResultOperation === ResultEnum.Success && exists(response.ResultObject.Contents))) 
       { 
        vm.Model = ContentVM.GetModelToShow(response.ResultObject.Contents); 
        vm.CurrentContent = vm.Model[0]; 
       } 
       else 
       { 
        //some like with error messages 
       } 
      } 
      catch (err) { } 

     deferred.resolve();    
    }, function() { 
     deferred.resolve(); 
    }); 

    LoadingService.Load(deferred.promise, 'first'); 
}; 

и директивы модели.

контроллер Directive:

vm.Model = { Id: 0 }; 

function init() 
{    
    vm.Model = exists($scope.model) ? $scope.model : getDefaultContentInfo(); 

    if(isStringEmpty(vm.Model.Price)) vm.Model.Price = ""; 
    vm.Model.PriceText = vm.Model.Price; 
    vm.Model.IsIntervalDate = !isStringEmpty(vm.Model.EndDate) && vm.Model.EndDate != vm.Model.StartDate; 
}; 

init(); 

$scope.$watch($scope.model, function() { 
    init(); 
}, true); 

Если я ставлю debugger внутри функции init() обновления директивы отлично с $scope.model, но если я не не ...

Кто-то может объяснить, что здесь происходит и как я могу это решить?

Я уже пробовал использовать $scope.$apply(), но у меня есть ошибка дайджеста, и я уже пытался использовать $timeout(), но модель директивы не обновляется.

$timeout(function() { 
    init(); 

    $scope.$watch($scope.model, function() { 
     init(); 
    }, true); 
},500); 

ответ

0

После выполнения проверки формы мне нужно было показать ошибки модели, и проблема снова появляется. И закончил после многих головных болей и нашел проблему.

В моей $scope.$watch

$scope.$watch($scope.model, function() { 
    init(); 
}, true); 

The watchExpression должен быть идемпотентности и поэтому я изменить код для этого

$scope.$watch('model', function() { 
    init(); 
}, true); 

И теперь работает !!!

Для получения более подробной документации click here

0

Ваш vm.Model, вероятно, не установлен, когда вы входите в инициализации. С отладчиком вы ожидаете достаточно времени, чтобы переменная была установлена.
Если getDefaultContentInfo() возвращает обещание, то вам нужно установить переменную в свои данные в функции then, возвращенной из обещания.

+0

В 'getDefaultContentInfo()' Я просто возвращает объект, как 'возвращение {Id: 0};'. Единственное обещание, которое у меня есть, - в представлении контроллера, где вызывается директива, 'loadData()' показал в моем вопросе. Возможно, это проблема? '$ Q.defer()' в 'loadData()'? '$ Scope. $ Watch()' в директиве не должен обрабатываться с этим изменением? – Ninita

+0

Тогда это проблема. вы не хотите, чтобы ваш html загружал (с директивой), пока вы не загрузите данные. я бы назвал 'loadData()' в функции init и установил переменную, когда ее завершили. Тогда я проверил бы эту переменную 'ng-if =" initDone "перед загрузкой страницы –

+0

Но' $ scope. $ Watch() 'не должен обрабатываться с этим? – Ninita