AngularJS 1.5.xサービスが正しくバインドされておらず、コントローラで更新されていません

何らかの理由で、工場出荷時の値を更新すると、関連するビューが更新されません。私は文字列ではなくサービス内のオブジェクトにバインドしているので、私が間違って行ったことは分かりませんが、実装に間違いがあります。私は簡潔さのためにコードを減らし、それをプランナーに加えました。私はサービスを止めすぎていると思ったが、明らかにそうではなかった。私もこれを読んでarticleを再度読んで、私が理解したと思ったものが正しいと確信していました。AngularJS 1.5.xサービスが正しくバインドされておらず、コントローラで更新されていません

タイトルの値が初めて取得され、「ようこそ！」と表示されます。タイトルの中で、それ以降は「Up Next！」に更新されません。

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

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <html-title></html-title> 
</head> 
<body> 

<main></main> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

<script> 

(function() { 

    'use strict'; 

    function MainController(HtmlTitleFactory) { 

     HtmlTitleFactory.set('Welcome!'); // title gets set 

     // check title was changed 
     this.data = HtmlTitleFactory.get(); 

     setTimeout(function() { 
      // updates title 
      HtmlTitleFactory.set('Up Next!'); 

      // title looks to be set, but changes not picked up in view 
      console.log(HtmlTitleFactory.get()); 
     }, 3000); 
    } 

    MainController.$inject = [ 
     'HtmlTitleFactory' 
    ]; 

    var main = { 
     template: '<div>{{ vm.data.title }}</div>', 
     controller: MainController, 
     controllerAs: 'vm' 
    }; 

    //////////////////////////// 

    function HtmlTitleController(HtmlTitleFactory) { 

     var vm = this; 

     //vm.title = HtmlTitleFactory.get().title; 
     vm.title = HtmlTitleFactory.get(); 
    } 

    HtmlTitleController.$inject = [ 
     'HtmlTitleFactory' 
    ]; 

    var htmlTitle = { 
     template: '<title>{{ vm.title.title }}</title>', 
     controller: HtmlTitleController, 
     controllerAs: 'vm' 
    }; 

    //////////////////////////// 

    function HtmlTitleFactory() { 

     var service = { 
      title: 'Default' 
     }; 

     function set(title) { 
      // originally tried this since bound to object this should work 
      // service.title = title; 

      // wasn't working so tried this as well 
      angular.extend(service, { 
       title: title 
      }); 
     } 

     function get() { 
      return service; 
     } 

     return { 
      set: set, 
      get: get 
     }; 
    } 

    HtmlTitleFactory.$inject = []; 

    //////////////////////////// 

    angular 
     .module('app', []) 
     .component('main', main) 
     .component('htmlTitle', htmlTitle) 
     .factory('HtmlTitleFactory', HtmlTitleFactory); 

})(); 

</script> 

</body> 
</html>

出典

2016-05-13 mtpultz

setTimeout変更は角コンテキスト外で実行そのカスタム・イベントとして、角度のコンテキストで発生したことを角度言うことはできないだろうイベントです。その場合、ダイジェストサイクルは起動せず、手動で実行する必要があります。

$timeoutは、setTimeoutと同じように動作し、コールバックが発生するとダイジェストサイクルを実行するのが理想的です。私はsetTimeoutを（私はしません）を使用した場合

$timeout(function() { 
    HtmlTitleFactory.set('Up Next!'); // update title 
    console.log(HtmlTitleFactory.get()); // title looks to be set but not picked up in view 
}, 3000);

Plunkr

出典

2016-05-13 09:51:02

そして、それが原因AngularJSが気づいていない変更を行うにだがそう起こったが、私がやった場合、私は実行する必要があると思いますそれを拾うために$ダイジェスト？ – mtpultz

@mtpultzはい、あなたは '$ apply（）/ $ digest（）'を使うことができますが、これは、ダイジェストサイクルをチェックするために条件を追加する必要がある場所を実装するのに悪いパターンです –

AngularJS 1.5.xサービスが正しくバインドされておらず、コントローラで更新されていません

答えて

関連する問題