AngularJS - How to load a service from other app

Question

I have this angular code:

This is my controller:

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


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

    };


});

This is my service:

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

And this is an autocomplete method:

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



                                }
                    };
                });

What i need to do is, in the select in the autocomplete, which is when you click an item ) call the customerDetails.loadCustomerDetails method (from the service). But it's in other app, right?

Is there any way to do this? Or maybe, a better way?

Answer 1

EDIT - This only addresses the OP's misunderstanding of the problem, while @TongShen seems to have offered a solution to the actual problem.

I think you're conflating the concept of an app with that of a module.

Apps would tend to need some extra layer (e.g. an API) to communicate with one another, so if what you demonstrated were apps, then yes, you might have a problem.

Instead, your code demonstrates the use of modules, which can be used extensively with Angular to help segment and encapsulate your code. Provided that each module is interfaced properly through use of dependency injection, they can access one another.

Here is a simple demonstration, loosely patterned from your code:

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

... and you can see that the console.log does fire in this Plunker.

Answer 2

You can pass the loadCustomerDetails function (from the controller scope) into the directive.

Define like this in the scope of your directive:

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

And update your directive usage in the HTML to add:

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

When you want to call the function in the directive, just call:

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

This should work.

P.S.

You may say an app is a module, but not all modules are apps. Sometimes you can make modules that are only packages of services, resources, or whatever. Services or functions from different modules can be used together very well in one app as long as you specify the dependencies correctly.