Question

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中存储的新值发出count时，它应该由{{1}接收并且MainController属性应设置为practiceInfo.count中$scope.practiceCount的新值...意味着其值已更改/重置为函数接收的结果。有了这个，新的数字不应该自动在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

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

很难确定事件的哪个发射器/广播器实际触发了处理程序
没有一点可以调试，因为一切都在努力保持＆＃34;同步＆＃34;通过在事情更新时通知事件
如果移动元素，则其与其他部分的范围关系会发生变化，并且它会在更改中接收事件的顺序（因为它们会在范围层次结构中向上或向下传播）
如果您最终停止传播事件以阻止外部部件接收事件然后移动部件（见上文），则会产生混淆

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

为什么我的页面上没有自动更新此号码？

1 个答案: