使用AngularJS中的$ broadcast和Service將數據傳遞給指令

Question

我正在遷移到基於Angular的前端。 在一些研究發現使用Service和$broadcast可能是一個很好的解決方案之后，我在JavaScript中JavaScript了一個函數將一些數據傳遞給指令。 但對我不起作用...

這是我的代碼：

var app = angular.module('app', []);
app.factory('broadcastService', ['$rootScope',
  function($rootScope) {
    var factory = {};
    factory.sendAjaxResut = function(name, obj) {
      console.log(' -- $broadcast ');
      $rootScope.$broadcast(name, obj);
    }
    return factory;
  }
]);

app.directive("bill", [directive]);
function directive() {
  return {
    restrict: "E",
    link: function($scope) {
      $scope.$on("b1", function(e, a) {
        console.log('-- directive')
      });
    }
  }
}

用於將數據傳遞給服務的代碼：

function _ajaxCUSTOMER(e) {
  angular
    .injector(['ng' ,'app']) 
    .get("broadcastService")
    .sendAjaxResut("b1", e);
}

<button onclick="_ajaxCUSTOMER('foo')" >Send</button>

問題1：什么是ng在.injector(['ng' ,'app'])

問題2：此時控制台僅顯示-- $broadcast 。 我的代碼無法捕獲指令中的事件的問題是什么

的jsfiddle

Answer 1

您的指令未獲得$ broadcast，因為您正在使用新的$ rootScope創建新的注射器。 而是使用應用程序的注入器。

function _ajaxCUSTOMER1(e) {
  var rawElem = document.getElementById("app");
  var elem = angular.element(rawElem);
  var _injector = elem.injector();
  var _broadcastService = _injector.get("broadcastService");
  _broadcastService.sendAjaxResut("b1",e);
}

本示例查找應用程序的元素，並使用angular.element檢索其注入器。

工作中的JSFiddle 。

Answer 2

您可以嘗試以下解決方案：

<button onclick="_ajaxCUSTOMER('foo', 'e')" >Send</button>
function _ajaxCUSTOMER(name,obj) {
    angular.element(document).find('body').injector().get('broadcastService').sendAjaxResut(name, obj);
      console.log('ok');
  }

  myApp.factory('broadcastService', ['$rootScope',
      function($rootScope) {
        console.log('broadcastService');
        var factory = {};
        factory.sendAjaxResut = function(name, obj) {
          console.log(' -- $broadcast ');
          $rootScope.$broadcast('newEvent', name, obj);
        }
        return factory;
      }
    ]);

    myApp.directive('bill', function () {
    return {
        restrict: 'EAC',
        controller: function($scope) {},
        link: function(scope, element, attrs) {
            scope.$on("newEvent", function(event, data, name, obj) {
              console.log('-- directive')
            });
        }
    };
});

Answer 3

您需要在html定義控制器 。

jsfiddle上的實時示例。

 var app = angular.module('app', []) .controller('ExampleController', function($scope, broadcastService) { }); app.factory('broadcastService', ['$rootScope', function($rootScope) { var factory = {}; factory.sendAjaxResut = function(name, obj) { console.log(' -- $broadcast '); $rootScope.$broadcast(name, obj); } return factory; } ]); app.directive("bill", function($rootScope) { return { restrict: "E", template:'<div>My bill</div>', link: function($scope) { $rootScope.$on("b1", function(e, a) { console.log('-- directive',a) }); } } }); function _ajaxCUSTOMER1(e) { angular.element(document).find('body').injector().get('broadcastService').sendAjaxResut('b1', e); }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body id="app" ng-app="app"> <div ng-controller="ExampleController"> <button onclick="_ajaxCUSTOMER1('5')"> Click Here to send 5 </button> <bill> </bill> </div> </body>

使用AngularJS中的$ broadcast和Service將數據傳遞給指令

問題描述

3 個解決方案

解決方案1
1 已采納 2016-02-05 12:47:19

解決方案2
0 2016-02-05 11:11:17

解決方案3
0 2016-02-05 11:14:36

使用AngularJS中的$ broadcast和Service將數據傳遞給指令

問題描述

3 個解決方案

解決方案1 1 已采納 2016-02-05 12:47:19

解決方案2 0 2016-02-05 11:11:17

解決方案3 0 2016-02-05 11:14:36

解決方案1
1 已采納 2016-02-05 12:47:19

解決方案2
0 2016-02-05 11:11:17

解決方案3
0 2016-02-05 11:14:36