追加/添加，文本和函数到 div 的内容
Posted
技术标签:
【中文标题】追加/添加，文本和函数到 div 的内容【英文标题】：Append / add, text and function to a div's content 【发布时间】：2018-07-11 15:28:22 【问题描述】：我目前正在开发一个基于AngularJS 的应用程序。我正在使用'pascalprecht.translate' 库来创建多语言应用程序。有关这方面的更多信息，请参阅link。在创建我的应用程序时，我创建了页面标题的动态切换。此开关从$routeProvider 中读取路由名称，并将相应的标题添加到<header>。请看下面的例子：
// Pages configuration
myApp.run(['$rootScope', '$route', function($rootScope, $route)
$rootScope.$on('$routeChangeSuccess', function()
document.title = $route.current.title;
var title = document.getElementsByTagName("title")[0].innerhtml;
var leftSvg = document.getElementById('leftsvg');
var rightSvg = document.getElementById('rightsvg');
// start responsive elements
$("footer").removeClass("hidden-xl-down");
$("#header").removeClass("hidden-xl-down");
$("#leftheaderblock").removeAttr('class');
$("#rightheaderblock").removeAttr('class');
$(".activefooter").removeAttr('class');
$("#homepageback").removeClass("hidden-xl-down");
$("#rightsvg").addClass("hidden-xl-down");
$("#leftsvg").addClass("hidden-xl-down");
$("body").removeAttr('class');
$("body").addClass(title);
if (title === 'login')
$("footer").addClass("hidden-xl-down");
$("#header").addClass("hidden-xl-down")
else if (title === 'productpage')
$("#homepageback").addClass("hidden-xl-down");
$("#homesvg").addClass("activefooter");
$("#leftheaderblock").addClass("col-55");
$("#rightheaderblock").addClass("col-45");
$('#leftheadertext').text('Alle producten');
$('#rightheadertext').text('Bestelling');
$("#rightsvg").removeClass("hidden-xl-down");
$("#leftsvg").removeClass("hidden-xl-down")
);
]);
html
<html> 是 index.html 文件中的一些简单 div。下面您将看到rightheaderblock 的示例。
<div id="rightheaderblock">
<div class="bc-f3f3f3 justify-content-center toptext d-flex align-items-center headerblock">
<span id="rightheadertext"></span>
</div>
</div>
问题
使用'pascalprecht.translate' 可以使用您自己的JSON 格式的语言库创建多语言应用程序。请看下面的例子：
var myApp = angular.module('myApp',['ngRoute','pascalprecht.translate','ngSanitize']);
var mypagetitle = document.getElementsByTagName("title")[0];
myApp.config(function ($routeProvider, $locationProvider, $translateProvider)
$locationProvider.hashPrefix('');
$routeProvider
.when('/',
templateUrl: 'views/login_view.html',
title: 'login'
)
.when('/productpage',
templateUrl: 'views/productpage_view.html',
title: 'productpage'
)
.when('/payorder',
templateUrl: 'views/payorder_view.html',
title: 'payorder'
);
$translateProvider
.translations('en',
'Opslaan': 'Save',
'Alle producten': 'All products',
'Bestelling': 'Order',
)
.translations('nl',
'Opslaan': 'Opslaan',
'Alle producten': 'Alle producten',
'Bestelling': 'Bestelling',
);
$translateProvider.useSanitizeValueStrategy('sanitize');
$translateProvider.preferredLanguage('nl'); // standaard taal bij openen
// configures staticFilesLoader
// configures staticFilesLoader
);
myApp.controller('mainCtrl', function($http, $scope)
$scope.text = "hi";
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main" ng-controller="mainCtrl">
<div id="rightheaderblock">
<div class="bc-f3f3f3 justify-content-center toptext d-flex align-items-center headerblock">
<span id="rightheadertext">
text
</span>
</div>
</div>
<div class="bodyTests">
<p> "Bestelling" | translate
</div>您可以在上面查看'tranlate' 函数如何工作的简单示例。通过将| translate 添加到字符串并将该字符串定义到.translations() 部分，我可以创建翻译。
回顾上面的// Pages configuration，您可以看到我正在使用if/else 语句来检查页面标题并将.text() 和classes 添加到当前页面标题的div 中。
我遇到的问题是通过 | translate 部分，例如"bestelling" | translate 从 if/else 语句到视图。所以通过以下行：
$('#rightheadertext').text('Bestelling');
到页面不是问题。但是添加
$('#rightheadertext').text(' Bestelling | translate ');
在视图中给我完整的字符串：
Bestelling | translate
我尝试了多种不同的功能，例如.val() 和append()。但似乎两者都不起作用。我想要的结果是将以下结构添加到视图中：
"string" | translate // call
如果您对我的问题有任何疑问或意见，请在下面的 cmets 中告诉他们。
一如既往，提前致谢！
【问题讨论】：
我相信这里的问题是你试图让 jQuery 更新文本但你想使用 Angular 的表达式替换。这两样东西不能这样一起用。你想避免像那样使用 jQuery，而只依赖 Angular 来完成这项工作。 @benjaminhull 我知道将JQuery 与Angular 结合使用不是正确的方法。但现在这些是我的例子，也是我尝试过的。我还在寻找和可能的Angularjs 方法来实现我想要达到的结果。
【参考方案1】：
这个怎么样...
<p> $root.text1 | translate </p>
然后在你的代码中，在 if/else...
if (...)
$rootScope.text1 = 'Bestelling';
else
$rootScope.text1 = 'Opslaan';
【讨论】：
像魅力一样工作（：谢谢！ 呼——我实际上并没有测试它，所以不是 100% 确定的。很高兴它奏效了。从 jQuery 到 Angular 的思维方式很难转变。以上是关于追加/添加，文本和函数到 div 的内容的主要内容，如果未能解决你的问题，请参考以下文章