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

根据全局变量语言下面的这个应该负责显示菜单（带有短语言代码的 文件） > 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 未刷新！ :(

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

PS：点击后，控制台打印短语言代码图

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：你的意思是＆＃39;这个＆＃39;并没有指向$ scope应该维护控制器中的所有数据...也许也想看一下。

继承笔，但除非我拥有基于lang返回数据的API代码，否则$ http将无法工作，但这应该可以让你到达http://codepen.io/nicholasabrams/pen/Qbgrzv所需的位置。

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

2 个答案: