AngularJS 1.5.x服務未正確綁定並且未在控制器中更新

由於某些原因，當我更新出廠值時，關聯視圖未更新。我綁定到服務中的一個對象，而不是一個字符串，所以我沒有看到我做錯了什麼，但肯定有錯誤的實現。爲了簡潔起見，我減少了代碼，並將其添加到了重擊程序中。我以爲我過去搞砸了服務，但顯然不是。我甚至再次讀了這個article以確保我認爲我理解的是正確的。AngularJS 1.5.x服務未正確綁定並且未在控制器中更新

標題的價值是第一次拿起，你看到'歡迎！'在標題中，但在此之後它不會更新爲'上一步！'。

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類似，並在回調觸發時運行摘要循環。

$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不知道已經發生，所以如果我使用的setTimeout（我不會），但如果我做了我需要運行$摘要有它拾起？ – mtpultz

@mtpultz是的，你可以使用'$ apply（）/ $ digest（）'，但這將是一個壞模式來實現你將再次需要添加條件來檢查摘要循環不應該進行中 –

AngularJS 1.5.x服務未正確綁定並且未在控制器中更新

回答

相關問題