jquery - LinkedIn 分享按钮仅出现在 AngularJS 应用程序的初始加载中

标签 jquery angularjs linkedin-api

我正在使用 AngularJS 1.3 和 jQuery 1.11,并且我正在尝试添加 LinkedIn 共享按钮(使用 LinkedIn share plugin generator )。该按钮出现在我的模板之一的 div 内。这是我的代码:

<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 时,脚本标签仍然存在)。

最佳答案

您需要重新解析动态添加的共享按钮。例如指令:

<!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>

它不能在代码片段中工作,但可以在单独的页面中工作。

关于jquery - LinkedIn 分享按钮仅出现在 AngularJS 应用程序的初始加载中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26169962/

相关文章:

javascript - 将图标添加到 Angular Material 输入

linkedin - 如何使LinkedIn V2 Share (SocialActions)正常工作?

php - jQuery - 根据视口(viewport)中的部分显示按钮

javascript - jsSocials 分享到 Pinterest image_url 错误

javascript - 如何取消绑定(bind)自定义对象的所有事件?

javascript - LinkedIn 如何知道或跟踪我嵌入其小部件的位置?

android - 从应用商店下载应用后,使用链接登录时出错

jquery - MaterializeCSS 芯片 onChipAdd 回调不起作用

javascript - 如何在angular js中显示嵌套ng-repeat的另一个表中的数据

JavaScript + 多部分/表单数据