范围更改后重新加载控制器（AngularJS）

Question

所以 我有这个控制器用于交换语言

app.controller("langCtrl",['$scope','$route',function($scope,$route){
    this.swap_lang = function(){
        if(lang == "tr"){
            lang = "en";
        }else{
            lang = "tr";
        }
        console.log(lang);
        this.lang = lang;
        //$route.reload();
        //$scope.$apply();
    };
}]);

下面这个应该是负责根据全局变量语言调出菜单（带有短语言代码的JSON文件） > 外角

var lang = "en";
app.controller("menusCtrl",['$http','$scope',function($http,$scope){
    $scope.test = lang;//for testing
    var these_menu =  this;
    these_menu.links = [];
    these_menu.titles = "";
    $http.get("menu-" + lang + ".json").success(function(data){
        these_menu.links = data[0].menus;
        console.log("Menus are here!");
        console.log(these_menu.links[2].sub_menus[1]);

    });
}

lang 变量交换了，但是 menusCtrl 没有刷新！ :(

如何用新数据更新视图，如何让我的控制器用新数据重新加载视图，我试过 reload 和 apply 但没有运气

PS : 控制台打印短语言代码后点击从 查看

Answer 1

首先，我会将其分解为一个服务，供您在整个应用程序中使用 $http。像这样：

var demo = angular.module('demo', []);

demo.service('GetData', function() {
  this.returnJsonByLangType = function(lang) {
    /** 
    *  normally I would use a function like 
    *  this to do the http work:
    *
    *  var response = $http.getJson(lang+'/dir/file.json');
    * Instead this will just alert the value with each change, 
    * ...you get the idea
    *
    **/

    alert('Current lang is: '+lang);

    // return response;

  }
});

 // Then I would instantiate a new service call returning the json based on the scope value which is changed via user selection of a link in the case below:

demo.controller('demoCtrl', function($scope, GetData) {
  $scope.languages = ['english', 'spanish', 'french'];
  $scope.activeLangSelection = $scope.languages[0]; // Default
  $scope.setLang = function(lang) {
    $scope.activeLangSelection = GetData.returnJsonByLangType(lang);
  };
});

PS：'this' 的意思不是指向 $scope 它应该维护来自控制器的所有数据......也许也想看看。

这是笔，但除非我有基于语言返回数据的 API 代码，否则 $http 将不起作用，但这应该可以让您到达您需要的位置 http://codepen.io/nicholasabrams/pen/Qbgrzv。

Answer 2

Angular 不能很好地处理外部变量。将您的 lang 变量设置为值提供者：

app.value("lang","en");

那么你最好定义一个工厂来处理语言交换：

app.factory("langFactory",['$scope','$route', 'lang', function($scope, $route, lang){
    this.swap_lang = function(){
        lang == 'tr' ? 'en' : 'tr';
        console.log("lang",lang);
        $scope.$digest;
    };

    this.lang = function(){
        return lang;
    };

    return this;
}]);

然后像这样使用它并在测试变量上添加一个监视以在更改时更新

app.controller("menusCtrl",['$http', '$scope', 'langFactory', function($http, $scope, langFactory){
    $scope.test = langFactory.lang;//for testing
    var these_menu =  this;
    these_menu.links = [];
    these_menu.titles = "";

    $scope.$watch("test",function(lang){
        $http.get("menu-" + lang + ".json")
            .success(function(data){
                these_menu.links = data[0].menus;
                console.log("Menus are here!");
                console.log(these_menu.links[2].sub_menus[1]);
            });
    });

}