Question

我试图在UI Bootstrap模式中加载LinkedIn内联配置文件（示例here）。

我在UI Bootstrap中使用完全相同的代码。模态有效，但LinkedIn内联配置文件无法生成。

有什么线索？

<!--OUTPUT-->
<ul>
    <li ng-repeat="item in items" class="ng-scope">
        <script type="IN/MemberProfile" data-id="https://www.linkedin.com/pub/kelsey-garvey/1a/954/75" data-related="false" data-format="inline">
        </script>
    </li>
    <li ng-repeat="item in items" class="ng-scope">
        <script type="IN/MemberProfile" data-id="https://www.linkedin.com/in/lindsayahearne" data-related="false" data-format="inline">
        </script>
    </li>
    <li ng-repeat="item in items" class="ng-scope">
        <script type="IN/MemberProfile" data-id="https://www.linkedin.com/pub/sean-gustilo/1/117/876" data-related="false" data-format="inline">
        </script>
    </li>
</ul>

//-JADE
script#myModalContent(type='text/ng-template')
    div.modal-header
        h3.modal-title I'm a modal!
        div.modal-body
            ul
                li(ng-repeat="item in items")
                    script(type="IN/MemberProfile", data-id="{{ item}}", data-related="false", data-format="inline")

//CONTROLLER
    $scope.items = [
      "https://www.linkedin.com/in/jeffweiner08", 
      "https://www.linkedin.com/in/williamhgates",
      "https://www.linkedin.com/in/barackobama"
    ]

    $scope.open = function (size) {

      console.log($scope.connections.used)

      var modalInstance = $modal.open({
        templateUrl: 'myModalContent',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };

    $scope.inputInit();
    $scope.timerStart();
    $scope.inputReset();
      $scope.connectionNext();
  });

angular.module('whoDatMemberApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    connection: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Answer 1

LinkedIn库在库加载完成后解析文档，并激活当前DOM 中的脚本标记。

如果DOM中的任何LinkedIn 脚本标记稍后出现，则图书馆不会观看它，因此它不会知道。您必须要求图书馆再次解析。

这个答案应该有帮助https://stackoverflow.com/a/5728329/1057958。

你的ModalInstanceCtrl控制器应该调用

IN.parse(domNode)

项目绑定到$ scope后

。

domNode 是您要解析的根节点，因此您应该获得对模态元素的引用并将其传递给 IN.parse

Angular / Jade / UI Bootstrap +内联Javascript

1 个答案: