为什么这个数字没有在我的页面上自动更新？

Question

TL;DR - $on 应该改变 practiceCount 的值......为什么不呢？这是代码笔： http://codepen.io/anon/pen/qNERva

这是我练习 MEAN 开发的第三天，所以我对此没有太多经验。

所以，我有一个控制器 MainController。我希望此控制器在 static/constantly 可用元素（在条件下不会 show/hide）上可用，例如我的导航栏，其目的是广播全局数据，例如 X 的总数在应用程序中。

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

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

}]);

然后我有一个 PracticeController 控制器。此控制器专门用于管理此应用程序上的 Practices（医学术语中的 Practice），即 creating/deleting/editing Practices.

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 并将新值存储在 count 时，它应该被 MainController，而 practiceInfo.count 属性应设置为 MainController 中 $scope.practiceCount 的新值...意味着它的值已 changed/reset 到无论功能接收的结果是什么。这样，新号码不应该在 HTML 上自动更改吗？

它只是保持为 0，这就是我在 MainController

中初始化它的方式

非常感谢有关此问题或任何其他相关问题的建议。

谢谢。

Answer 1

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

JS

(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

我在整个应用程序中使用事件来传达更改时遇到的一些问题。

难以确定哪个 emitter/broadcaster 事件实际触发了处理程序
没有要调试的单点，因为一切都试图保持 "in sync" 通过在事情更新时通知它的事件
如果您移动一个元素，它与其他部分的作用域关系会发生变化，并且它接收事件的顺序也会发生变化（因为它们在作用域层次结构中向上或向下传播）
如果您最终停止传播事件以阻止外部部分接收事件，然后移动一个部分（见上文），您就会感到困惑

事件肯定有它们的位置，在像 Node 这样的系统中似乎运行良好，但 Angular 中的事件系统如果谨慎使用是最好的。我认为有意义的地方是当您想要全局广播发生登录事件之类的事情时，或者您基本上希望组件之间的耦合非常松散，其中任意数量的任何类型的 children 可能正在监听事件它们创建后的时间。也就是说，如果有办法解决服务或工厂的问题，通常更容易调试和跟踪正在发生的事情。

为什么这个数字没有在我的页面上自动更新？

Why isn't this number updating automatically on my page?

auto-update

mean

express

angularjs