Question

EDIT2：

var LanguageCtrl;

LanguageCtrl = function($scope, $http, $window) {
  var vm;
  vm = this;
  if ($window.navigator.language.indexOf('it') !== -1) {
    this.lang = 'it';
    this.setLanguage = 'it';
  } else {
    this.lang = 'en';
    this.setLanguage = 'us';
  }
  this.message = [];
  this.pizze = [];
  this.getPizze = function(lang) {
    $http.get('localization/pizze-' + lang + '.json').success(function(pizze) {
      vm.pizze = pizze;
    });
  };
  this.setLanguage = function(lang) {
    $http.get('localization/' + lang + '.json').success(function(data) {
      vm.lang = lang;
      vm.message = data;
      vm.getPizze(vm.lang);
      $window.location.href = '#!/order';
    });
  };
  this.setLanguage(this.lang);
};

angular.module('myApp').controller('LanguageCtrl', LanguageCtrl);

编辑：我说的不起作用，当我使用this而不是$scope时，它不起作用！

我正在转向controller as语法，当我为变量执行此操作时，一切都很顺利，但当我为$http.get填充的数组尝试相同的操作时，代码中断。

不要关心那个可怕的<button onclick>，只是想测试推迟链接样式的代码。

控制器

var LanguageCtrl;

LanguageCtrl = function($scope, $http, $window) {
  if ($window.navigator.language.indexOf('it') !== -1) {
    this.lang = 'it';
    this.setLanguage = 'it';
  } else {
    this.lang = 'en';
    this.setLanguage = 'us';
  }
  this.message = [];
  this.pizze = [];
  $scope.getPizze = function(lang) {
    $http.get('localization/pizze-' + lang + '.json').success(function(pizze) {
      $scope.pizze = pizze;
    });
  };
  $scope.setLanguage = function(lang) {
    $http.get('localization/' + lang + '.json').success(function(data) {
      this.lang = lang;
      $scope.message = data;
      $scope.getPizze(this.lang);
      $window.location.href = '#!/order';
    });
  };
  $scope.setLanguage(this.lang);
};

angular.module('myApp').controller('LanguageCtrl', LanguageCtrl);

index.html工作

<html ng-app="myApp" ng-controller="LanguageCtrl as langctrl" lang="{{langctrl.lang}}">

order.html没有

<button onclick="location.href='#!/cart'" ng-disabled="howManyPizze === 0">{{langctrl.message.cart}} {{howManyPizze === 0 ? langctrl.message.empty : '(' + howManyPizze + ')'}}</button>
<button onclick="location.href='#!/'">{{langctrl.message.change}}</button>

Answer 1

var LanguageCtrl;

LanguageCtrl = function( $http, $window) {
  var parent = this;
  if ($window.navigator.language.indexOf('it') !== -1) {
   parent.lang = 'it';
   parent.setLanguage = 'it';
 } else {
   parent.lang = 'en';
   parent.setLanguage = 'us';
 }
 this.message = [];
 this.pizze = [];
 parent.getPizze = function(lang) {
   $http.get('localization/pizze-' + lang + '.json').success(function(pizze)    {
     console.log("Your language is:"+lang)
     parent.pizze = pizze;
   });
 };
 parent.setLanguage = function(lang) {
   $http.get("example.json").success(function(data) {
    // $scope.$apply(function(){
     console.log("Your language is:"+lang)
     parent.lang = lang;
     parent.message = data;
     parent.getPizze(parent.lang);
     $window.location.href = '#!/order';     
    //})

  });
 };
 parent.setLanguage(parent.lang);
};
angular.module('myApp',[]).controller('LanguageCtrl', LanguageCtrl);

使用上面的代码来处理角度代码。

在这里创建了Plukar https://plnkr.co/edit/psOaylBtnCsLDIJydT9N?p=preview

Answer 2

问题是当this结算时，自引用$http.get()不可用。这就是为什么当使用'Controller as'语法时，你经常会看到var vm = this;或类似于控制器中第一行的东西。通过将this分配给控制器中的本地变量，它可以在您的承诺解析时提供访问权限。简而言之，添加......

var vm = this;

...到您的控制器，然后将$http.get()更改为此...

vm.setLanguage = function(lang) {
    $http.get('localization/' + lang + '.json').success(function(data) {
        vm.lang = lang;
        vm.message = data;
        vm.getPizze(vm.lang);
        $window.location.href = '#!/order';
    });
};

<强>更新
我错过了原来的答案：

$scope.getPizze = function(lang) {
    $http.get('localization/pizze-' + lang + '.json').success(function(pizze) {
        $scope.pizze = pizze;
    });
};

需要更改以消除$scope的使用。

vm.getPizze = function(lang) {
    $http.get('localization/pizze-' + lang + '.json').success(function(pizze) {
        vm.pizze = pizze;
    });
};

无法在`$ http.get`请求中摆脱`$ scope`而支持`this`

2 个答案: