Angular/Jade/UI Bootstrap + Inline Javascript

Question

I'm trying to load LinkedIn inline profile (example here) in a UI Bootstrap modal.

I'm using the exact same code in the UI Bootstrap. The modal works, but the LinkedIn inline profiles are not generating.

Any clue why?

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

The LinkedIn library parses the document when the library is finished loading, and activate script tags that are in the DOM at that moment.

If any LinkedIn script tags appear later in the DOM, the library isn't watching it, so it wouldn't know. You have to ask the library to parse it again.

This answer should be of help https://stackoverflow.com/a/5728329/1057958.

Your ModalInstanceCtrl controller should call

IN.parse(domNode)

after items have been bound to the $scope.

domNode being the root node you want to parse down, so you should get a reference to your modal element and pass it to IN.parse