Angular/Jade/UI 引导 + 内联 Javascript答案

【问题标题】：Angular/Jade/UI Bootstrap + Inline JavascriptAngular/Jade/UI 引导 + 内联 Javascript
【发布时间】：2014-10-26 00:07:00
【问题描述】：

我正在尝试在 UI 引导模式中加载 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');
  };
});

【问题讨论】：

您能提供输出 HTML 吗？经过 Jade 和 Angular 处理后。也许只需右键单击模式 -> 检查，右键单击 html 元素，复制为 HTML，粘贴到此处。
我猜你必须加载一个 LinkedIn 库才能使这些脚本标签活跃起来。也许这样一个库的某些功能在页面加载时被调用，完成工作；如果是这种情况，您可能需要在 angular 绑定脚本标签后再次调用它。

标签： angularjs pug linkedin angular-ui-bootstrap

【解决方案1】：

LinkedIn 库在库完成加载后解析文档，并激活 DOM 中的脚本标签此时。

如果任何 LinkedIn 脚本标签稍后出现在 DOM 中，则库没有观察它，所以它不会知道。您必须要求库再次解析它。

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

你的 ModalInstanceCtrl 控制器应该调用

IN.parse(domNode)

在 items 被绑定到 $scope 之后。

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

【讨论】：