Question

我正在开发一个移动应用程序，其中列出了一些项目。可以下拉此列表以启动列表刷新（我正在使用iScroll4）。我现在正试图将此事件挂钩到我的角度控制器，这样我就可以进行api调用并更新模型。

javascript基本如下：

[..] //javascript code to detect the pulldown event

function pullDownAction(){
     //I want to update the scope here
}

根据我所读到的内容，我需要制作一个角度指令并从那里调用事件，但我仍然没有弄清楚上面的代码应该去哪里。

我还尝试在pullDownAction函数中广播事件并在控制器中监听它，如下所示：

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

但我确信我遗漏了一些重要的东西，这些代码无法运行。我对角度很新，所以我还没有真正了解指令的工作方式。

Answer 1

在指令的link函数中，设置iScroll4插件。在链接功能中也定义pullDownAction()。然后，由于关闭，您将可以访问范围。

app.directive('iscroll4Wrapper', function() {
    return {
       link: function(element, scope, attrs) {
          var pullDownAction = function() {
            // update scope here
          }
          $(??).iScroll4({   // I have no idea how to initialize this
            onSomeEvent: function(...) {
               pullDownAction();
               scope.$apply();  // or put this in pullDownAction()
            }
          });
       }
    }
}

您使用注射器尝试的内容无效，因为you created new injector。

Answer 2

我通过在链接函数中放置事件的所有javascript代码来实现它：

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的容器中放入一个属性，现在他们可以访问相同的范围。我的元素看起来像这样：

<div class="pull-to-refresh" pulldown="update()">
   //Element to be "pull-to-refreshable" here
</div>

update（）当然是控制器中的一个功能，你可以做任何你想做的事情！

将自定义javascript事件绑定到angular

2 个答案: