AngularJS - 控制器通信

时间:2015-01-28 14:36:04

标签: angularjs controller

在我的网站上,我有以下结构

Header_controller

myApp.controller('Header_controller',function($scope,$rootScope,$location,Genral_model){

    $scope.logout = function(){
        var data = {};
        $rootScope.$emit('logout_clicked', data);  // NOT WORKING
        $rootScope.$broadcast('logout_clicked', data); // NOT WORKING
    }

});

Users_controller:

myApp.controller('Users_controller', function ($scope,$rootScope,Users_model,$location,$state) {

    $rootScope.$on('logout_clicked', function(event, resp) {
        Users_model.unRegisterCookies();
    });
})

Users_model:

myApp.factory('Users_model', function($rootScope,$http,$cookies) {
  var factory={};

  factory.unRegisterCookies = function(){
      alert('log out');
  }


  return factory;
});

我试图通过从unRegisterCookiesHeader_controller发送广播来调用Users_controller功能,但它不能使用发射功能而不是广播。

如何使其有效?

2 个答案:

答案 0 :(得分:2)

这是你正在尝试的基本代码,它对我有用。也许你的代码中的其他地方有错误?

http://plnkr.co/edit/SADWwkZWztoVJVjv0tKt

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="HeaderCtrl">
      <p>Button has been hit {{counter}} times.</p>
    </div>
    <div ng-controller="UsersCtrl">
      <button ng-click="pushme()">Count Me In</button>
    </div>

  </body>
</html>

脚本:

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

app.controller('HeaderCtrl', function($scope, $rootScope) {
  $scope.counter = 0;

  $rootScope.$on('countMeIn', function (event, data) {
    $scope.counter = $scope.counter + 1;
  });

});


app.controller('UsersCtrl', function($scope, $rootScope) {

  $scope.pushme = function() {
    $rootScope.$emit("countMeIn", {});
  };

});

答案 1 :(得分:1)

请参阅此plnkr以获取代码的工作版本:

http://plnkr.co/edit/JN5yWBUjmjBh5m7FiQww

这与您发布的代码完全相同,并且它正在运行。您的页面中可能还有其他错误。如果您使用的是Chrome或FireFox,请调高控制台,看看您的网页显示的错误。

HTML:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.2.28/angular-cookies.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="HeaderCtrl">
      <h1>Headers Controller</h1>
      <button ng-click="logout()">Log out</button>
    </div>
    <div ng-controller="UsersCtrl">
      <h1>Users Controller</h1>
    </div>

  </body>
</html>

脚本:

var myApp = angular.module('myApp', ['ngCookies']);

myApp.controller('HeaderCtrl', function($scope, $rootScope) {

  $scope.logout = function(){
      var data = {};
      $rootScope.$emit('logout_clicked', data);  // NOT WORKING
      $rootScope.$broadcast('logout_clicked', data); // NOT WORKING
  }  

});

myApp.controller('UsersCtrl', function($scope, $rootScope, Users_model) {

  $rootScope.$on('logout_clicked', function(event, resp) {
      Users_model.unRegisterCookies();
  });

});

myApp.factory('Users_model', function($rootScope,$http,$cookies) {
  var factory={};

  factory.unRegisterCookies = function(){
      alert('log out');
  }


  return factory;
});