AngularJS从不同文件中的指令调用函数

时间:2017-12-25 10:45:44

标签: angularjs

起初我搜索了很多关于这个问题,使用了一些建议,但无法得到结果。 我有一个js文件,main.js,其中只有一个控制器,一切正常:

var app = angular.module('monitoringApp', ['ui.bootstrap', 'ngCookies', 'angularCharts','angularUtils.directives.dirPagination','ngLoadScript','ngRoute','dragtable']);

app.controller('mainController', ['$scope', '$http', '$cookies', '$cookieStore' , '$location', function($scope, $http, $cookies, $cookieStore,$location) { 
//some function which i need to call;
}

我已经为拖放表列添加了一个库dragtable.js和dragEnd()函数内部我想在main.js中调用一些函数

var project = angular.module("dragtable", []);

project.directive('draggable', function($window, $document) {
 function dragEnd($event) {  need to call function inside main.js }
}

请注意,我已经尝试使用共享服务,但在调用的函数上仍然未定义错误。

1 个答案:

答案 0 :(得分:0)

存储函数的文件并不重要。也就是说,directive不太可能是您正在寻找的,因为指令主要用于链接到像小部件这样的html元素。可以将其视为MVC模型方案中的控制器。它可以从编码站点与ui进行交互。但是,如果您无权访问指令,则无法直接调用指令函数。

另一方面,服务只是一个可以在控制器或其他地方注入的单个对象。

你想要的可能就是:

project.factory('draggable', function () {
  function dragEnd($event) { ... }
  return dragEnd
})

在主模块中:

app.controller('mainController', 
  [
    '$scope'
  , '$http'
  , '$cookies'
  , '$cookieStore'
  , '$location'
  , 'draggable'
  , function(
      $scope
    , $http
    , $cookies
    , $cookieStore
    , $location
    , draggable
  ) { 
  //here you can call draggable
  }]
)

在这里,您可以看到可拖动的函数aka dragEnd被注入控制器中。如果你想将这个常用函数用于多个处理程序,那么这很好,但是你可能需要将函数绑定到这样的对象:

var draggable = draggable.bind(someobj)

或者将其与applycall

一起使用
draggable.call(someobj, event)
draggable.apply(someobj, [event])

这样做的原因是,如果你想在调用它时从函数内部访问this,它可能不是你期望的那样,这取决于你实际调用该方法的方式。

还有一条关于你的指令的说明......你总是要归还一些东西。在你的情况下,你可能创建工厂,但没有返回任何东西。因此,您遇到了“未定义”错误。如果您没有返回任何内容,工厂将在运行时创建并删除该功能。