爲什麼這個數字不能在我的頁面上自動更新？

TL; DR - $on應該更改practiceCount的值......爲什麼不是這樣？這裏是codepen：http://codepen.io/anon/pen/qNERva 爲什麼這個數字不能在我的頁面上自動更新？

這是我第三天練習MEAN發展，所以我沒有這個太多的經驗。

所以，我有一個控制器MainController。我希望此控制器可用於靜態/持續可用的元素（不會顯示/隱藏條件），例如我的導航欄，其目的是廣播全局數據，例如應用程序中X的總數。

app.controller('MainController', [ '$scope','$http', function($scope, $http){ 

    $scope.practiceCount = 0; 
    $scope.$on('practiceInfo', function(event, practiceInfo){ 
    $scope.practiceCount = practiceInfo.count; 
    }); 

}]);

然後我有一個PracticeController控制器。該控制器專門用於管理此應用程序的實踐（醫學實踐），即創建/刪除/編輯實踐。

app.controller('PracticeController', ['$scope', '$http', function($scope,$http){ 

    //refresh function that fetches practices 
    var refresh = function(){ 
     $http.get('/practices').success(function(response){ 

      $scope.practices = response; 
      $scope.practiceCount = response.length; 
      $scope.$emit('practiceInfo', { 
       count: $scope.practiceCount 
      }); 

     }); 
    } 

    refresh(); 

    $scope.createPractice = function(){ 

     if($scope.practice) 
      $http.post('/practices', $scope.practice).success(function(response){ 
       console.log(response); 
       refresh(); 
      }) 

    } 
}]);

最後，在我的index.html（模板）文件，我已經迷上了MainController到我的導航欄的<ul>，並想顯示practiceCount，像這樣的：

<ul ng-controller="MainController"> 

{{practiceCount}} 

</ul>

根據我目前的理解，我的期望

現在...我對此還不太瞭解，但從我的理解中，當我發出practiceInfo w如果存儲在count中的新值，那麼它應該被MainController接收，並且practiceInfo.count屬性應該被設置爲$scope.practiceCount的新值MainController ...意味着它的值已經被改變/重置爲功能接收的結果是。有了這個，不應該在HTML上自動更改新的號碼嗎？

它只是停留爲0，這是我的初始化它MainController

建議將不勝感激，在這個問題上，或其他任何與自己相關。

感謝。

來源

2016-06-01 Barry D.

你在哪裏使用'PracticeController'？ –

@animateA.White在'practices.html'（一個動態加載的模板） - 'ngRoute'處理它。 –

發射依賴於控制器樹的hiearchy。我們不知道那是什麼。 '$ scope。$ on（'practiceInfo'' firing？ – charlietfl

http://codepen.io/anon/pen/XKJMrm?editors=1000

(function() { 

    var app = angular.module('pcentrum', ['ngRoute']); 

    app.controller('MainController', function($scope, PracticeService) { 

    $scope.PracticeService = PracticeService; 

    }); 

    // Practice Service 
    app.service('PracticeService', function($http) { 
    var practiceService = { 
     refresh: function() { 
     return $http.get('http://jsonplaceholder.typicode.com/posts').success(function(response) { 
      practiceService.practices = response; 
      practiceService.practiceCount = response.length; 
     }); 
     } 
    } 
    practiceService.refresh(); 
    return practiceService; 

    }); 
}());

HTML

<html lang="en" ng-app="pcentrum"> 

<head> 
    <meta charset="UTF-8"> 
    <title>PCentrum</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

</head> 

<body> 
    <div class="container-fluid top-bar"> 
    <span>Dashboard</span> 
    </div> 

    <div class="container-fluid rest none"> 
    <div class="col-md-2 bg-info menu"> 
     <h4>Menu</h4> 
     <hr> 
     <ul ng-controller="MainController"> 
     <a href="#/dashboard"> 
      <li><i class="fa fa-user"></i>Dashboard</li> 
     </a> 
     <a href="#/practices"> 
      <li><i class="fa fa-user"></i>Practices&nbsp<span class="badge">{{PracticeService.practiceCount}}</span></li> 
     </a> 
     <a href="#/doctors"> 
      <li><i class="fa fa-user"></i>Doctors</li> 
     </a> 
     <a href="#/pickups"> 
      <li><i class="fa fa-user"></i>Pickups</li> 
     </a> 
     <a href="#/reports"> 
      <li><i class="fa fa-user"></i>Reports</li> 
     </a> 
     </ul> 

    </div> 

    <!-- Main Body Content --> 
    <div class="col-md-10 content" ng-controller="MainController"> 

     <!-- angular templating --> 
     <!-- The respective content will be inject here--> 
     <div ng-view></div> 


    </div> 
    </div> 

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

</html>

我做你的代碼的扭捏版本的基礎上我會怎麼通常做，或如何我見過別人做一般它在過去。有上做出一個通用的API服務也在這裏，你可能會發現有趣的一個很好的寫了起來：

https://gist.github.com/jelbourn/6276338

我已經看到了使用事件進行溝通整個應用程序的變化的一些問題。

很難確定哪個發射器/事件的廣播觸發了處理程序
無單點由具有通知它的事件時，事情更新調試，因爲一切都在試圖保持「同步」
如果您移動某個元素的範圍關係與其他部分的更改以及它接收的更改事件的順序（因爲它們向上或向下傳播範圍層次結構）
如果最終停止傳播事件以停止外部零件接收一個事件，然後移動一部分（見上），你有混淆

事件確實有它們的位置，像Node這樣的系統似乎工作得很好，但如果使用節省，Angular的事件系統是最好的。我發現有意義的地方是，當你想在全局廣播中發生類似於登錄事件的事件時，或者你基本上希望組件之間有非常鬆散的耦合時，任何類型的任何類型的子任何時候都可能在任何時候監聽事件創建。這就是說，如果有辦法解決服務或工廠的問題，通常更容易調試和跟蹤發生的事情。

來源

2016-06-01 01:37:34 shaunhusain

我正在嘗試此操作，有一個我可能會愛上你 - 只是一個警告。 –

好吧，我正式使用服務，感謝您的建議！：D –

非常高興聽到它幫助！ – shaunhusain

爲什麼這個數字不能在我的頁面上自動更新？

回答

相關問題