范围更改后重新加载控制器 (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带有短语言代码的文件）根据全局变量语言外Angular

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 : The console prints short language codes after clicking from view

Answer 1

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

}

Answer 2

首先，我会将其分解为一项服务，供您在整个应用程序中使用 $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，它应该维护来自控制器的所有数据...也许也想看看那个。

这是笔，但 $http 将无法工作，除非我有 API 代码，其中 returns 数据基于 lang，但这应该可以让你到达你需要的地方 http://codepen.io/nicholasabrams/pen/Qbgrzv.

范围更改后重新加载控制器 (AngularJS)

Reload controllers after scope change (AngularJS)

javascript

scope

routes

view

angularjs