如何将angularjs变量值传递给其他.js文件

时间:2014-11-15 06:03:35

标签: javascript angularjs

我是angularjs的新手。我想让angularjs变量到其他js文件。我的角度js文件代码是......

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

我想将merchant.shopName转换为其他js文件,以便如何获取此变量值。 和我的html文件代码。

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

我想在脚本文件中捕获此变量,如下所示

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

但无效

2 个答案:

答案 0 :(得分:5)

这是角度服务的一个很好的用例。

在另一个文件中,您可以创建如下服务:

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

现在您已经创建了&#39; factoryName&#39;服务,将其注入控制器并将其范围用于您的视图。

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

你刚刚完成了。您当然需要在index.html中引用.js文件,最后在您的html模板中使用它,例如:

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

如果您想要一个Plnkr示例,请告诉我。

答案 1 :(得分:0)

无论您在申请中使用何种数据,都必须使用$rootScope

在你的情况下:

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

然后在你的HTML中

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