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');
  };
});

Could you provide the output HTML ? After it has been processed by Jade and Angular. Maybe just a right click on the modal -> inspect, right-click the html element, copy as HTML, paste here. — zrz
– zrz, Commented Oct 27, 2014 at 16:17
I guess you have to load a LinkedIn library to bring these script tags alive. Maybe some functions of such a library are called on page load, doing the work; If it's the case you would maybe need to call it again, after the angular has bound the script tags. — zrz
– zrz, Commented Oct 29, 2014 at 8:46

Community · Accepted Answer · 2017-05-23 12:01:47Z

0

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Oct 29, 2014 at 9:01

zrz

3502 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular/Jade/UI Bootstrap + Inline Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related