2016-06-01 3 views
0

TL; DR - $on должен изменить значение practiceCount ... почему? Здесь codepen:http://codepen.io/anon/pen/qNERvaПочему этот номер не обновляется автоматически на моей странице?

enter image description here

Это мой третий день практики MEAN развития, так что я не слишком много опыта с этим.

Итак, у меня есть контроллер MainController. Я хочу, чтобы этот контроллер был доступен на статичных/постоянно доступных элементах (которые не будут отображаться/скрываться при условии), таких как мой nav-bar, и его цель - передавать глобальные данные, такие как общее количество 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

Совета был бы оценен, по этому вопросу, или что-нибудь еще, что релевантно.

Спасибо.

+0

где вы используете 'PracticeController'? –

+0

@ DanielA.White на 'practice.html' (динамически загружаемый шаблон) -' ngRoute' позаботится об этом. –

+0

Исход зависит от дерева контроллера hiearchy. мы не знаем, что это такое. Является ли '$ scope. $ On ('practiceInfo'' firing? – charlietfl

ответ

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


Некоторые проблемы, которые я видел, с помощью событий общаться изменений во всем приложении.

  • Трудно определить, какой излучатель/вещатель события на самом деле вызвало обработчику
  • Нет единой точки для отладки, так как все пытается остаться «в синхронизации», имея события, которые уведомляют его, когда все обновляется
  • Если вы перемещаете элемент, его взаимосвязь области видимости с другими изменениями деталей и порядок, в котором он принимает события в изменениях (поскольку они распространяются вверх или вниз по иерархии областей)
  • Если вы прекратите распространение событий, чтобы остановить внешние части от приема событие, а затем переместить часть (см. выше), у вас есть путаница

События определенно имеют свое место и в таких системах, как Node, работают хорошо, но система событий в Angular лучше, если использовать экономно. Места, которые я вижу, имеют смысл, когда вы хотите глобально транслировать что-то вроде события входа в систему или где вы в основном хотите очень слабое соединение между компонентами, где любое количество детей любого типа может прослушивать событие в любое время после того, как они создано. Тем не менее, если есть способ решить проблему с помощью сервиса или фабрики, обычно проще отлаживать и отслеживать, что происходит.

+0

Я пробую это сейчас, есть Я могу влюбиться в тебя - просто предупреждение. –

+1

Хорошо, я официально пользуюсь услугами, спасибо за ваш совет !! : D –

+0

Удивительно приятно слышать, что это помогло! – shaunhusain