LinkedIn共享按钮仅在AngularJS应用的初始加载中显示 [英] LinkedIn share button only appearing on initial load in AngularJS app
问题描述
我正在将AngularJS 1.3与jQuery 1.11结合使用，并且试图添加一个LinkedIn共享按钮(使用 LinkedIn共享插件生成器).此按钮显示在div内我的一个模板中.这是我的代码:
I am using AngularJS 1.3 with jQuery 1.11, and I'm trying to add a LinkedIn share button (using the LinkedIn share plugin generator). This button appears in one of my templates, inside a div. Here is my code:
<div style="padding: 10px;">
<!-- Social media icons from sharethis.com -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-counter="right"></script>
</div>
此按钮仅在我最初访问页面/加载模板时出现.如果我再次访问该页面，该按钮将不再在那里(但是，当我检查DOM时，脚本标记就在那里了.)
This button only appears when I initially visit the page / load the template. If I visit the page again, the button is no longer there (when I inspect the DOM, the script tags are there, however).
推荐答案
您需要重新解析动态添加的共享按钮.例如，使用指令:
You need reparse dynamically added share buttons. For example with directive:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
</head>
<body ng-app="plunker">
<div ng-controller="MainCtrl">
<div ng-repeat="elem in elements">
<linked-in-share></linked-in-share>
</div>
<button ng-click="addShare()">Add</button>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.elements = [0];
$scope.addShare = function () {
$scope.elements.push( $scope.elements.length);
};
}]).directive('linkedInShare', [function() {
return {
restrict: 'E',
template: '<script type="IN/Share" data-counter="top"><\/script>',
link: function (scope, element, attrs) {
if (IN.parse) {
IN.parse();
}
}
};
}]);
</script>
</body>
</html>
它不能在摘要中使用，但可以在单独的页面中使用.
It doesn't work in a snippet but it works in separate page.
这篇关于LinkedIn共享按钮仅在AngularJS应用的初始加载中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
