Двустороннее связывание в Угловом JS

У меня проблема с последующим кодом.Двустороннее связывание в Угловом JS

мой код HTML страницы:

<body ng-app="myapp"> 

    <div ng-controller="myController"> 
    The message is {{message}} 
     <input type="button" value="Change Message" ng-click="changeMessage()"> 

    </div>

Мой контроллер код:

app.controller('myController',function($scope) 
{    
$scope.changeMessage=function() 
    { 
     setTimeout(function(){ 
     console.log("Message changed"); 
     $scope.message="Hurray !!! New Message";  

     },3000); 

$scope.newMessage=function() 
     { 
      $scope.message="hello"; 
      console.log("new message"); 
     };

Но если я использую функцию changeMessage я не в состоянии видеть измененное свойство Message даже несмотря на то, console.log сообщение приходит. что здесь отсутствует в обоих случаях.

Заранее спасибо

источник

2016-03-20 user2779311

Причина, по которой изменение не отражается в представлении является то, что из-за задания выполняется в обратном вызове в setTimeout, что приводит к угловым не замечая изменений. Это связано с так называемым циклом digest. Существуют различные способы решения этой проблемы.

использование $scope.$apply() обернуть ваше задание

или даже лучше использовать существующие $timeout услуги, предоставляемые угловой вместо вызова setTimeout который уже обрабатывает эту проблему выше для вас.

Для получения дополнительной информации см https://docs.angularjs.org/api/ng/service/$timeout для использования $ таймаута

и https://docs.angularjs.org/api/ng/type/$rootScope.Scope по причинам, за $ применяется.

Общее описание того, что здесь происходит, описано в http://www.sitepoint.com/understanding-angulars-apply-digest/

источник

2016-03-20 12:15:50

вы должны использовать $ переваривать() после того, что тайм-аут сделано:

$scope.changeMessage=function() 
{ 
    setTimeout(function(){ 
    $scope.message="Hurray !!! New Message"; 
    $scope.$digest(); 
    },3000); 
}

Обратите внимание, что это гораздо лучше использовать $ переваривать вместо $ применять (производительность связанной):

scope. $ Digest() будет запускать наблюдателей в текущем объеме и для всех его детей. $ apply будет оценивать пройденную функцию и запускать $ rootScope. $ digest()

источник

2016-03-20 12:13:43

каждое изменение должно происходить в цикле углового умножения. если вы меняете значения извне (это именно то, что происходит, если вы используете setTimeout вместо углового $timeout) угловой не обновляет ваш вид до следующего цикла дайджеста (https://www.ng-book.com/p/The-Digest-Loop-and-apply/). поэтому в вашем случае message уже установлен, но представление не обновлено.

попробовать что-то вроде этого:

app.controller('myController', function($scope, $timeout) { 
    $scope.changeMessage = function() { 
    $timeout(function(){ 
     console.log("Message changed"); 
     $scope.message="Hurray !!! New Message";  
    }, 3000); 

    $scope.newMessage=function() { 
    $scope.message="hello"; 
    console.log("new message"); 
    };

источник

2016-03-20 12:15:16 pierrebeitz

Двустороннее связывание в Угловом JS

ответ

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