Question

我有这个角度代码：

这是我的控制器：

MyApp.controller('vtCustomerController', function ($scope, messageBus, customerDetails, $http, $q) {


   $scope.loadCustomerDetail = function (customerID) {
        customerDetails.loadCustomerDetails(customerID);

    };


});

这是我的服务：

MyApp.factory('customerDetails', function($rootScope,$http, $q) {

        var customer = {};

        getCustomer = function()
        {
            return customer;
        };

       loadCustomerDetails = function(customerID) {
             $http.post('/customer/data/getsingleexpanded',
                   {'customer':customerID})
                    .success(function(data,status, headers, config){
                        angular.copy(data, customer);
                    })
                    .error(function(data,status, headers, config){
                        console.log(status);
                    });   
        };
});

这是自动填充方法：

angular.module('text-autocomplete',[])
                .directive('text-autocomplete', function(){
                    return {
                                require: '^ngModel',
                                restrict: 'A',
                                scope:{
                                    ngModel:'=',
                                    datasource:'=',
                                    minlength:'=',
                                    itemid:'='
                                },
                                link: function(scope, elem, attr, ctrl) {

                                        elem.autocomplete({
                                            autoFocus : !_.isUndefined(attr.autofocus)? true : false,
                                            open: function(event,ui){console.log('autocomplete open message received')},
                                            source: function(request,response){
                                                    scope.datasource(ctrl.$viewValue)
                                                         .then(function(result){
                                                             console.log('data source then function called');
                                                             console.log(result.data);
                                                                response(result.data)});
                                                },
                                            minLength: scope.minlength,
                                            select: function(event,ui){
                                                console.log('autofocus select called');
                                                console.log(ui);
                                                    //-1 indicates item not found
                                                 //store the information in the control. 
                                                 if(ui.item.value != '-1')
                                                 {
                                                         scope.ngModel = ui.item.label;
                                                         if(attr.itemid)
                                                         {
                                                             scope.itemid = ui.item.value;
                                                         }

                                                 }
                                                 else if(ctrl.$viewValue != '')
                                                 {
                                                     scope.ngModel = ctrl.$viewValue;
                                                     scope.itemid = 0;
                                                 }
                                                 else
                                                 {
                                                     console.log('setting the account number to blank');
                                                     scope.ngModel = '';
                                                     scope.itemid = -1;                                                     
                                                 }
                                                 scope.$apply();

                                                 return false;
                                                },
                                             focus: function(event,ui){
                                                return false;
                                                },
                                             close: function(event,ui){
                                                 console.log('autocomplete close called');
                                                 console.log(ui);
                                                }
                                          });



                                }
                    };
                });

我需要做的是，在自动填充中的选择，即单击某个项目时）调用 customerDetails.loadCustomerDetails 方法（来自服务）。但它在其他 app 中，对吧？

有没有办法做到这一点？或者，或许，更好的方式？

Answer 1

编辑 - 这只解决了OP对问题的误解，而@TongShen似乎提供了实际问题的解决方案。

我认为您将应用的概念与模块的概念混为一谈。

应用程序往往需要一些额外的层（例如API）来相互通信，所以如果您演示的是应用程序，那么是的，您可能会遇到问题。

相反，您的代码演示了 modules 的使用，它可以与Angular一起使用，以帮助细分和封装您的代码。如果通过使用依赖注入正确地连接每个模块，它们可以相互访问。

这是一个简单的演示，从您的代码中松散地模式化：

var myApp = angular.module('myApp', ['otherApp']);
var anotherModule = angular.module('otherApp', []);

myApp.factory('MyFactory', function(){
  var stuff = {};

  stuff.doSomething = function(){
    console.log('just did something');
  }

  return stuff;
});

anotherModule.directive('myDirective', function(MyFactory){
  return {
    restrict: 'E',
    link: function(){
      MyFactory.doSomething();
    }  
  }
});

...您可以看到console.log确实在this Plunker。

Answer 2

您可以将loadCustomerDetails函数（来自控制器作用域）传递给指令。

在您的指令范围内定义如下：

scope:{
    ngModel:'=',
    datasource:'=',
    minlength:'=',
    itemid:'=',
    autoComplete: '&'
},

并在HTML中更新您的指令用法以添加：

<...... text-autocomplete ...... auto-complete="loadCustomerDetails($customerId)">

如果要在指令中调用该函数，只需调用：

scope.autoComplete({$customerId: customerId});

这应该有用。

P.S。

您可能会说应用程序是一个模块，但并非所有模块都是应用程序。有时您可以创建仅包含服务，资源或其他任何包的模块。只要您正确指定依赖项，就可以在一个应用程序中很好地使用来自不同模块的服务或函数。

AngularJS - 如何从其他应用程序加载服务

2 个答案: