Angular JS - 当本地化setLanguage（）调用时，View不会绑定

I'm binding a view (home.html) to my html (index.html) page. While on page load, the routing happens properly and my view loads. But when I click English or Latin links on index.html, setLanguage() method is called from the localize object and my view disappears/ doesn't update. Not sure, why?

我将视图(home.html)绑定到我的html(index.html)页面。在页面加载时,路由正常,我的视图加载。但是当我点击index.html上的英文或拉丁文链接时,从localize对象调用setLanguage()方法,我的视图消失/不更新。不确定,为什么?

This is my index.html

这是我的index.html

<body ng-controller="AppController">
    <H1 data-i18n="_HomeTitle_"></H1>
    <div data-i18n="_Greeting_"></div>
    <div ng-view></div>
    <hr/>
    <a href="#" ng-click="setEnglishLanguage()">English</a> | <a href="#" ng-click="setPigLatinLanguage()">Latin</a>
</body>

home.html:

<div class="container-fluid">
  <div class="row-fluid">
    <h2 data-i18n="_HomeControllerTitle_"></h2>
  </div>
  <div class="row-fluid">
    <div class="well">
      <div class="span1" data-i18n="_NameHeader_"></div>
      <div class="span2" data-i18n="_EmailHeader_"></div>
      <div class="span3" data-i18n="_BioHeader_"></div>
      <div class="span1"><a href="#/new"><span class="icon icon-plus"></span></a></div>
    </div>
    <div class="row-fluid" ng-repeat="person in People">
      <div class="span1" ng-bind="person.FirstName + ' ' + person.LastName"></div>
      <div class="span2" ng-bind="person.Email"></div>
      <div class="span3" ng-bind="person.Bio"></div>
      <div class="span1"><a href="#/edit/{{$index}}"><span class="icon icon-edit"></span></a></div>
    </div>
  </div>
</div>

app.js

'use strict';

/* App Module */

var myapp = angular.module('localizeApp', ['localization','ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/', {templateUrl:'partials/home.html'}).
        otherwise({redirectTo:'/'});
}]);

AppController.js:

myapp.controller("AppController",function ($scope, localize) {
    $scope.People = [{FirstName:"Jim", LastName:"Lavin", Email:"jlavin@jimlavin.net", Bio:"Creator and Host of Coding Smackdown TV"}];

    $scope.setEnglishLanguage = function() {

        localize.setLanguage('en-US');
        console.log(localize)
    };

    $scope.setPigLatinLanguage = function() {

        localize.setLanguage('es-es');
        console.log(localize)
    };
});

1 个解决方案

#1

Most possibly it is because the anchor click triggers a url change and your router interferes with it and tries to route it. Try preventing default behavior on click.

最有可能的原因是锚点击会触发网址更改,路由器会干扰它并尝试路由它。尝试阻止点击时的默认行为。

ng-click="setEnglishLanguage($event)"

and

   $scope.setEnglishLanguage = function($event) {
        $event.preventDefault(); //prevent default behavior of location update
        localize.setLanguage('en-US');
        console.log(localize)
    };

and similarly for the other one as well.

并且对于另一个也是类似的。

#1