1

我正在开发一个移动应用程序，其中列出了一些项目。可以下拉此列表以启动列表的刷新（我使用的是 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;
        });           
});

但我确定我遗漏了一些重要的东西，导致代码无法正常工作。我对 Angular 很陌生，所以我还没有真正了解指令的工作原理。

4

2 回答 2

2

在指令的链接功能中，设置 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()
            }
          });
       }
    }
}

您尝试使用 injector 的方法无效，因为您创建了新的 injector。

于 2013-04-09T15:25:18.540 回答
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() 当然是控制器中的一个函数，你可以做任何你想做的事情！

于 2013-04-11T07:26:40.727 回答