0

I'm building an app from an admin dashboard admin I bought in wrapbootstrap.

It comes with a module that loads a json file for translation.

I access this parameters via html like this

{{ 'parameters.items.ITEM1' | translate }}

I wonder if I can access those parameters from a controller. The idea is to show a javascript alert written in user's language.

EDIT companies.detail.html

 <script type="text/ng-template" id="/confirm.companies.delete.html">
    <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        <h4 id="myModalLabel" class="modal-title">{{ 'general.modal.title.WARNING' | translate }}</h4>
    </div>
    <div class="modal-body" style="white-space: pre-wrap;"> {{ 'companies.modal.DELETE' | translate }} </div>
    <div class="modal-footer">
        <button ng-click="ok()" class="btn btn-primary">{{ 'general.modal.button.OK' | translate}}</button>
        <button ng-click="cancel()" class="btn btn-warning">{{ 'general.modal.button.CANCEL' | translate}}</button>
    </div>
</script>

EDIT companies_detail.js

(function() {
'use strict';
angular
    .module('appname')
    .controller('companyDetailCtrl', companyDetailCtrl);

companyDetailCtrl.$inject = ['$scope','Data','$log', '$uibModal', '$location', '$state', 'SweetAlert','$rootScope', '$translate'];

function companyDetailCtrl($scope, Data, $log, $uibModal, $location, $state, SweetAlert,$rootScope, $translate){
    Data.get('companies/'+$scope.company_id).then(function(data){
        $scope.companyDetail = data[0];
    });

    $scope.openAlert = function(){
        //HERE I NEED TO ACCESS THAT JSON PARAMETERS TO FORMAT SWEETALERT
        SweetAlert.swal({   
            title: 'Are you sure?',   
            text: 'Your will not be able to recover this imaginary file!',   
            type: 'warning',   
            showCancelButton: true,   
            confirmButtonColor: '#DD6B55',   
            confirmButtonText: 'Yes, delete it!',   
            cancelButtonText: 'No, cancel plx!',   
            closeOnConfirm: false,   
            closeOnCancel: false 
        }, function(isConfirm){  
            if (isConfirm) {     
                SweetAlert.swal('Deleted!', 'Your imaginary file has been deleted.', 'success');   
            } else {     
                SweetAlert.swal('Cancelled', 'Your imaginary file is safe :)', 'error');   
            } 
        });
    };

    $scope.updateCompany = function(company_id){
        Data.put('companies/'+company_id, $scope.companyDetail).then(function(data){
            if(data=true){
                $state.reload();
                history.back();
            } else {
                $log.log('companyDetailCtrl > Error > no se pudo actualizar la empresa.');
            };
        });
    };

    $scope.deleteCompany = function(company_id){
        //$log.log(company_id);
        Data.delete('companies/'+company_id, $scope.companyDetail).then(function(data){
            if(data=true){
                $state.reload();
                history.back();
            } else {
                $log.log('companyDetailCtrl > Error > no se pudo eliminar la empresa.');
            };
        });
    };

    $scope.historyBack = function(){
        $state.reload();
        history.back();
    };
};
})();

EDIT en_US.json

{
  "dashboard": {
    "WELCOME": "Welcome to {{appName}}"
  },
  "topbar": {
    "search": {
      "PLACEHOLDER": "Type and hit enter.."
    }
  },
  "sidebar": {
    "WELCOME": "Welcome",
    "heading": {
      "HEADER": "Main Navigation"
    },
    "nav": {
      "SINGLEVIEW": "Single View",
      "DASHBOARD": "Dashboard",
      "COMPANIES": "Companies",
      "menu": {
        "MENU": "Menu",
        "SUBMENU": "Sub Menu"
      }
    }
  },
  "companies": {
    "WELCOME": "List of the companies associated to the system",
    "grid": {
        "ID":"uID",
        "NAME":"Name",
        "DOCUMENT":"Document",
        "DOCUMENT_TYPE":"Document type",
        "ADDRESS":"Address",
        "PHONE1":"Phone",
        "PHONE2":"Alt. Phone",
        "WEBSITE":"Website",
        "EMAIL":"Email",
        "LOGO":"Logo",
        "ACTIONS":"Actions"
    },
    "buttons":{
        "NEW":"Add company"
    },
    "modal":{
        "ADD":"You are about to add a new company. \n\r Are you sure?",
        "DELETE":"You are about to delete the company. \n\r This process cannot be undone. \n\r Are you sure?"
    },
    "SEARCH":"Filter companies"
  },
  "forms": {
    "validate":{
        "REQUIRED":"Required field",
        "EMAIL":"Invalid email format"
    },
    "buttons":{
        "BACK":"Back",
        "SAVE":"Save",
        "DELETE":"Delete",
        "EDIT":"Edit"
    }
  },
  "general": {
    "modal":{
        "title":{
            "WARNING":"WARNING!",
            "ERROR":"ERROR!"
        },
        "button":{
            "OK":"Accept",
            "CANCEL":"Cancel"
        }
    }
  }
}

I'm trying to reach general.modal.title.WARNING within $scope.openAlert

Thanks for help.

leandronn
  • 173
  • 1
  • 17
  • ReferenceError: parameters is not defined at Scope.$scope.openAlert – leandronn Jan 02 '16 at 14:55
  • 1
    If you can access the parameters in the HTML in the way you described, so you're supposed to access them from the controller through you $scope object: `$scope.parameters`. – Jodevan Jan 02 '16 at 15:03
  • Remove the single quotes around it, it's not a string: `{{ parameters.items.ITEM1 | translate }}` – Avijit Gupta Jan 02 '16 at 15:12
  • In html the translation is working fine. I need to know how to access via javascript to this parameters... – leandronn Jan 02 '16 at 15:13
  • @Jodevan it returns `ReferenceError: parameters is not defined at Scope.$scope.openAlert` – leandronn Jan 02 '16 at 15:19
  • Post your html code and your controller. This will help a lot. – Jodevan Jan 02 '16 at 15:22
  • @Jodevan ready. added html script from a modal that is already working, added complete controller code and json file. thanks – leandronn Jan 02 '16 at 15:30
  • Which service returns the content of en_US.json? – Jodevan Jan 02 '16 at 15:49
  • As @Jodevan already suggested, you should be able to access the parameters from the scope in your controller. The [`translate` filter](https://github.com/angular-translate/angular-translate/blob/master/src/filter/translate.js#L65) uses underneath `$translate.instant`, so you can do the same thing in your controller in order to show localized message. – boyomarinov Jan 02 '16 at 16:51
  • solved injecting $filter and calling $filter('translate')('parameter.data.xxx') – leandronn Jan 03 '16 at 01:24

0 Answers0