Access Angular variable within script tag

Question

I am making a web app:front-end in Angular and backend in Rails. I am using LinkedIn's member profile plugin which shows person's profile based on URL being passed. Here is the code for this plugin.

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="(Your LinkedIn URL)" data-format="inline" data-related="false"></script>

I want to make data-id part dynamic. Basically, I will let my users to write their linkedin address in text box and save it to Angular's variable. When the value changes, I want that value gets assigned to data-id. But I'm not sure whether data-id can access a variable in Angular.

Fizzix · Accepted Answer · 2016-05-17 01:40:37Z

1

Quite simple. Create your app along with a global controller that will be initialised on your html tag like so:

<html ng-app="app" ng-controller="myctrl">
  <head>
     <script type="IN/MemberProfile" data-id="{{myId}}" data-format="inline" data-related="false"></script>
  </head>
</html>

And have this as your controller and app initialisation, or something similar:

var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope){
  $scope.myId = 123;
}]);

To break it down, $scope.myId will be assigned the LinkedIn ID, and it is output on the page inside the head tag (I'm guessing that's where you want it) within the data-id attribute on the script tag.

WORKING EXAMPLE

answered May 17, 2016 at 1:40

Fizzix

24.5k40 gold badges117 silver badges180 bronze badges

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

7 Comments

Jokingpsh Over a year ago

Thanks. Can you also put ng-change in Script tag? Once user hits "save linkedin url" link, i want to input the value into the Script tag and populate the plugin.

Fizzix Over a year ago

@Jokingpsh - Are you after something like this? In that example, a user can input their ID into an input and click the update button. It is then saved and changed on the script tag.

Jokingpsh Over a year ago

That is what I was basically doing but the plugin was not being called correctly. I think it may be linkedin's plugin issue :/

Fizzix Over a year ago

Yes, probably is. The way around it may be to only create the tag once the user has entered a value and clicked save, like so: example. That example will only create the tag on the page once the user has clicked the save button. This way will not work if the user wants to change the ID again; that will require extra code.

Jokingpsh Over a year ago

I think it is linkedin's own problem. It successfully does the trick but it doesn't work as I want :/

|

Collectives™ on Stack Overflow

Access Angular variable within script tag

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related