アングル変換が機能していません。appendChildにhtmlを追加すると、ビューが更新されません。

私はそのためのプランナーリンクを添付しました。アングル変換が機能していません。appendChildにhtmlを追加すると、ビューが更新されません。

これは

<!doctype html> 
<html ng-app="myApp"> 

<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.js"></script> 
    <script src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script> 
    <script src="https://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script> 
    <script src="https://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-controller="someController"> 
    <div id="parent"> 
    <h1>{{'HEADLINE' | translate }}</h1> 
    <button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button> 
    <button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button> 
    <button id="myButton" class="float-right submit-button" ng-click="showDiv()" >Click here</button> 
    </div> 

<script type="text/javascript"> 

</script> 
<div id="hello"> 

<span name="new" id="newpage" style="display: none;"> 
    <h1 class="xx">{{'HELLO'| translate }}</h1> 
    </span> 
    </div> 
</body> 

</html>

app.js

angular.module('myApp', ['pascalprecht.translate', 'ngCookies']); 

angular.module('myApp').config(['$translateProvider', 
    function($translateProvider) { 
    var language = (window.navigator.userLanguage || window.navigator.language).toLowerCase(); 
    console.log(language); 
    $translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], { 
    'en_US': 'en_US', 
    'en_UK': 'en_US', 
    'en': 'en_US', 
    'de': 'de_DE' 
    }); 

    $translateProvider.useStaticFilesLoader({ 
     prefix: 'lang_', 
     suffix: '.json' 
    }); 


    $translateProvider.preferredLanguage('en_US'); 
    // $translateProvider.use('de'); 
    $translateProvider.useCookieStorage(); 
    $translateProvider.fallbackLanguage("de_DE"); 
    } 
]); 

angular.module('myApp').controller('someController', ['$scope', '$translate', 
    function($scope, $translate) { 

    $scope.switchLanguage = function(key) { 
     $translate.use(key); 
    }; 
    $scope.showDiv = function() 
    { 
     var html = document.getElementById("newpage").innerHTML; 
     var container = document.createElement("span"); 
     container.innerHTML = html; 
     document.getElementById("parent").appendChild(container); 

    } 
    } 

]);

lang_de_DE.json

{ 
"HEADLINE": "Überschrift", 
"LANG_DE_DE": "Sprache: Deutsch", 
"LANG_EN_US": "Sprache: Englisch", 
"HELLO"  :"Neue Seite" 
}

lang_en_US.json

{ 
"HEADLINE": "Headline!", 
"LANG_DE_DE": "Lang: German", 
"LANG_EN_US": "Lang: English", 
"HELLO"  :"New page" 
}

私のhtmlです

この新しいページのテキスト（show div関数）では、言語を変更すると更新されません。プランカリンクhttps://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview

出典

2016-08-25 radiance88

ng-repeatを使用して、コントローラ内のDOMを操作しないでください。

このようなもので、あなたのスパンを変更

：

<span ng-repeat="div in divs"> 
    <h1 class="xx">{{'NEWPAGE'| translate }}</h1> 
</span>

とあなたのshowDiv機能：

scope.divs = []; 
$scope.showDiv = function() 
{ 
    $scope.divs.push({}); 
}

更新plunker here。

あなたは、より角度のあるやり方で考えることがはっきりと必要です。 jqueryとdom操作コードでコントローラを汚染しないでください。これはanglejsのためではありません。

ng-repeat hereのドキュメントを読んでください。

出典

2016-08-25 07:35:25 Luxor001

アングル変換が機能していません。appendChildにhtmlを追加すると、ビューが更新されません。

答えて

関連する問題