將數據傳遞給AngularJS中帶有$ broadcast和Service的指令

我正在遷移到基於Angular的前端。我有一個功能JavaScript將一些數據傳遞給指令，經過一些研究發現使用Service和$broadcast可能是一個很好的解決方案。但不爲我工作...

這裏是我的代碼：

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

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

問題1：

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') 
     }); 
    } 
    } 
}

將數據傳遞到服務代碼是什麼ng在.injector(['ng' ,'app'])

問題2：此時控制檯只顯示-- $broadcast。什麼是我的代碼無法在指令捕捉事件的問題

jsfiddle

來源

2016-02-05 Mironline

，因爲你正在創建一個新的$ 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來檢索其注入器。

working JSFiddle。

來源

2016-02-05 12:47:19 georgeawg

你可以試試這個解決方案：

<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') 
      }); 
     } 
    }; 
});

來源

2016-02-05 11:11:17 SuperComupter

@SuperComputer你可以在控制檯上看到「' - directive」「嗎？ – Mironline

我用[你的解決方案]（https://jsfiddle.net/9u2gqzw5/4/）修改了我的代碼，起初，調用service方法有問題，請你重新檢查你的代碼並更新[jsfiddle]（https： //jsfiddle.net/9u2gqzw5/4/），謝謝 – Mironline

你需要在你的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>

來源

2016-02-05 11:14:36

我已經在jsfiddle上檢查過你的代碼，但是控制檯只顯示' - $ broadcast'，而不是' - directive' – Mironline

好的，我現在更新了。現在檢查https://jsfiddle.net/Stepan_Kasyanenko/bxx0e191/ –

將數據傳遞給AngularJS中帶有$ broadcast和Service的指令

回答

相關問題