How to get angularjs variable value to other .js file

Question

I am new to angularjs. I want to get angularjs variable to other js file. My angular js file code is...

  angular.module('myApp.menu', ['myApp.cloverApi', 'myApp.preOperation'])
    .controller('popMenuCtrl', ['$scope', '$http', '$routeParams',  'category', 'order', 'init', 'mInfoService', 'preop', 'mobileDetector', function($scope, $http, $routeParams, category, order, init, mInfoService, preop, mobileDetector) {
 mInfoService.init($scope.errorCallback)
                .success(function (data) {
                    $scope.merchant.shopName = $scope.capitalizing(data.name);

I want to get merchant.shopName to other js file so how can i get this variable value. and my html file code.

 <span ng-show="!isMerchant">{{merchant.shopName}}</span>

I want to catch this variable in script file as below

<script>
addToHomescreen({
    message: 'Add {{merchant.shopName}} to Your Phone, tap %icon, then <strong>Add to Home Screen </strog>',
    displayPace: 0
    });
</script>

but is not working

Using Angular, it's very uncommon to see anything in <script> tags like this. Instead, using factories to hold data that gets communicated through html via scopes is standard procedure, i think. Where is merchant.shopName being generated from and where do you want it to go? — irth
– irth, Commented Nov 15, 2014 at 9:59

irth · Accepted Answer · 2014-11-15 06:43:31Z

This a good use-case for an angular service.

In another file, you create a service like this:

angular.module('app').factory('factoryName', function(){
// create factory object
    var data = {};
    data.someProperty = 'Some Property';
    data.someMethod = function(){
        console.log('Service Method');
    }
// return the factory object
    return data;
})

Now that you have created your 'factoryName' service, inject it into a controller and scope it for your view.

angular.module('app').controller('YourCtrl', function($scope, factoryName){
    $scope.fromService = factoryName;
});

You're just about done. You'll of course need to reference the .js file in your index.html and finally use it in your html template, for example:

<div ng-controller="YourCtrl">
    <input ng-model="fromService.someProperty"/>
    <button ng-click="fromService.someMethod()">Console Log</button>
</div>

Please let me know if you'd like a Plnkr example.

CrazyGeek · Accepted Answer · 2014-11-15 06:07:45Z

0

Whatever data you wanna use through out your application than you must use $rootScope

In your case:

angular.module('myApp.menu', ['myApp.cloverApi', 'myApp.preOperation'])
.controller('popMenuCtrl', ['$scope', '$http', '$routeParams',  'category', 'order',     'init', 'mInfoService', 'preop', 'mobileDetector', function($scope, $http, $routeParams, category, order, init, mInfoService, preop, mobileDetector) {
mInfoService.init($scope.errorCallback)
            .success(function (data) {
                // Here is the change
                $rootScope.merchant.shopName = $scope.capitalizing(data.name);

and then in your html

<span ng-show="!$rootScope.isMerchant">{{$rootScope.merchant.shopName}}</span>

answered Nov 15, 2014 at 6:07

CrazyGeek

3,4572 gold badges26 silver badges39 bronze badges

2 Comments

Linial Over a year ago

You must use $rootScope? that is the most unconstructive answer I've seen in SO, what about angular.factory? Why do you bind unnecessary data to the $rootScope? What if he doesn't need it through ALL of his files? -1.

irth Over a year ago

it's ironically chuckle-able that above takes offence to the use of 'must,' only to follow with 'most' :) anyway, @CrazyGeek 's solution is one of many valid ways to do this, however should explain the caveats.

Collectives™ on Stack Overflow

How to get angularjs variable value to other .js file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related