[英]Passign data to directive with $broadcast and Service in AngularJS
我正在迁移到基于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
。 我的代码无法捕获指令中的事件的问题是什么
您的指令未获得$ 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
检索其注入器。
您可以尝试以下解决方案:
<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')
});
}
};
});
您需要在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.