时间戳

首页 > 解决方案 > 从服务向控制器发出事件不会在 ng-repeat 上加载菜单

javascript - 从服务向控制器发出事件不会在 ng-repeat 上加载菜单

问题描述

我正在尝试$emit来自服务的事件，该事件将告诉我的控制器何时加载菜单。它在构建 DOM 时加载但不是 $on 事件时工作。

问题是一旦在 ng-repeat 上发出事件，它就不会构建菜单。

如果您最初运行loadMenu()菜单结果很好...

angular.module('app',[])

.controller('mainCtrl',function(appState, $rootScope){
  var vm = this;
  
 /*
  * This would show the menu but I only want to show it when 'loadMenu' is emitted
  * loadMenu();
  */
  
  function loadMenu() {
    vm.menuItems = [
      {name: 'settings'},
      {name: 'home'}
    ];
  }
  
  var watchMenu = $rootScope.$on('loadMenu', function() {
     console.log('LOAD THE MENU');
     loadMenu();
  });
  
  vm.emitMenu = function() {
    appState.emitMenu();
  }
})

.service('appState', function($rootScope) {
    var service = this;
    service.data = {};
    
    service.emitMenu = function() {
      $rootScope.$emit('loadMenu');
    }
    
    return service;
});
<html ng-app="app">
 <body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="mainCtrl as vm">
  <div>
      <ul ng-repeat="menu in vm.menuItems">
        <li>
          <a href="">
            <span ng-bind="menu.name"></span>
          </a>
        </li>
      </ul>
    </div>

   <button type="button" ng-click="vm.emitMenu()">Emit</button>
</div>
  </body>
 </html>

标签： javascripthtmlangularjsangularjs-ng-repeat

解决方案

推荐阅读