问题描述
我正在开发一个移动应用程序,其中列出了一些项目.可以下拉此列表以启动列表刷新(我使用的是iScroll4).我现在正在尝试将此事件挂接到我的角度控制器,以便我可以进行api调用并更新模型.
I'm working on a mobile application where I have list with some items. This list can be pulled down to inititate a refresh of the list (I'm using iScroll4). I'm now trying to hook this event up to my angular controller so I can make an api call and update the model.
javascript基本上如下:
The javascript is basically as follows:
[..] //javascript code to detect the pulldown event
function pullDownAction(){
//I want to update the scope here
}
根据我所读的内容,我需要做出一个角度指令并从那里调用该事件,但是我仍然不知道上面的代码应该去哪里.
Based on what I have read, I need to make an angular directive and call the event from there, but I still haven't figured out where the above piece of code should go.
我也尝试过在pullDownAction函数中广播事件,并在控制器中监听它,就像这样:
I have also tried broadcasting the event from within the pullDownAction function and listening to it in the controller, like so:
function pullDownAction(){
var $rootScope = angular.injector(['ng']).get('$rootScope');
$rootScope.$apply(function(){
$rootScope.$broadcast('updateInbox');
});
});
,然后在控制器中:
$scope.$on('updateInbox', function(){
$http.get(apiUrl)
.success(function (data) {
$scope.model = data;
});
});
但是我确定我错过了一些重要的东西,这些东西使代码无法正常工作.我对angular还是很陌生,所以我还没有真正了解指令的工作原理.
But I'm sure I'm missing something important which makes the code not work. I'm quite new to angular, so I haven't really gotten the hang of how directives work yet.
推荐答案
我通过将事件的所有javascript代码放入链接函数来使其工作:
I made it work by putting all the javascript code for the event in the link function:
app.directive('pullToRefresh', function () {
return {
restrict: 'AC',
link:
function (scope, element, attr) {
//Code to detect when element is pulled goes here
function pullDownAction(){
scope.$eval(attr.pulldown);
}
然后我只是在名为pulldown的容器中放置一个属性,它们现在可以访问相同的作用域.我的元素看起来像这样:
I then just put an attribute in the container called pulldown, and they now have access to the same scope. My element looks like this:
<div class="pull-to-refresh" pulldown="update()">
//Element to be "pull-to-refreshable" here
</div>
update()当然是控制器中的一个函数,您可以在其中做任何想做的事情!
update() is of course a function in the controller where you can do whatever you want!
这篇关于将自定义javascript事件绑定到angular的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!