I have variables in my angular controller and I'd like to take the data in the variable and put in a script tag in my html but I have no clue how to execute this. I'm doing this because I want to take a picture and put it into my LinkedIn post with the share button. Based on the docs here, it seems pretty straight forward if I can just get the data from my controller into their script tags.

For example:

controller.js

.controller('PostCtrl', function ($scope, $http, $stateParams) {
     $scope.test = "something";
     $scope.hope = 5
     $scope.array = [things];
}

html

<script>
var payload = {
  "ment": $scope.test "content": {
    "title": $scope.hope,
    "someArray": $scope.array,
    "submitted-url": window.location.href
  }
};
</script>

////////////////////////// Thanks for the copious ments. Here is what I'm trying in more detail with LinkedIn:

<script type="IN/Share" data-url={{webAddress}} data-counter="right">
                  $.get( ".1/sites", function( response ) {
                    var post = _.first(_.filter(response.posts, function(n){return n.title.replace(/ /g,"-").replace(/[:]/g, "").toLowerCase() === $stateParams.id}));
                    var post1 = _.assign(post, {category: _.first(_.keys(post.categories)), pic: _.first(_.values(post.attachments)).URL, credit: _.first(_.values(post.attachments)).caption, linkCredit: _.first(_.values(post.attachments)).alt, fullStory: post.content.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')});
                    **var image = post1.pic;**
                    **var title = post1.title;**
                    **var webAddress = window.location.href;**

                    function onLinkedInLoad() {
                      IN.Event.on(IN, "auth", shareContent);
                    }

                   function onSuccess(data) {
                    console.log(data);
                   }

                   function onError(error) {
                    console.log(error);
                   }

                   function shareContent(title, image, webAddress) {

                    var payload = {                         
                      "content": {
                        "title": title,
                        "submitted-image-url": image,
                        "submitted-url": webAddress
                      }
                    };

                    IN.API.Raw("/people/~/shares?format=json")
                      .method("POST")
                      .body(JSON.stringify(payload))
                      .result(onSuccess)
                      .error(onError);
                   }
                  });

                  </script>

I still think something is going wrong. But what? Am I using the http correctly as I've only done it using Angular thus far.

I have variables in my angular controller and I'd like to take the data in the variable and put in a script tag in my html but I have no clue how to execute this. I'm doing this because I want to take a picture and put it into my LinkedIn post with the share button. Based on the docs here, it seems pretty straight forward if I can just get the data from my controller into their script tags.

For example:

controller.js

.controller('PostCtrl', function ($scope, $http, $stateParams) {
     $scope.test = "something";
     $scope.hope = 5
     $scope.array = [things];
}

html

<script>
var payload = {
  "ment": $scope.test "content": {
    "title": $scope.hope,
    "someArray": $scope.array,
    "submitted-url": window.location.href
  }
};
</script>

////////////////////////// Thanks for the copious ments. Here is what I'm trying in more detail with LinkedIn:

<script type="IN/Share" data-url={{webAddress}} data-counter="right">
                  $.get( "https://public-api.wordpress./rest/v1.1/sites", function( response ) {
                    var post = _.first(_.filter(response.posts, function(n){return n.title.replace(/ /g,"-").replace(/[:]/g, "").toLowerCase() === $stateParams.id}));
                    var post1 = _.assign(post, {category: _.first(_.keys(post.categories)), pic: _.first(_.values(post.attachments)).URL, credit: _.first(_.values(post.attachments)).caption, linkCredit: _.first(_.values(post.attachments)).alt, fullStory: post.content.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')});
                    **var image = post1.pic;**
                    **var title = post1.title;**
                    **var webAddress = window.location.href;**

                    function onLinkedInLoad() {
                      IN.Event.on(IN, "auth", shareContent);
                    }

                   function onSuccess(data) {
                    console.log(data);
                   }

                   function onError(error) {
                    console.log(error);
                   }

                   function shareContent(title, image, webAddress) {

                    var payload = {                         
                      "content": {
                        "title": title,
                        "submitted-image-url": image,
                        "submitted-url": webAddress
                      }
                    };

                    IN.API.Raw("/people/~/shares?format=json")
                      .method("POST")
                      .body(JSON.stringify(payload))
                      .result(onSuccess)
                      .error(onError);
                   }
                  });

                  </script>

I still think something is going wrong. But what? Am I using the http correctly as I've only done it using Angular thus far.

• javascript
• angularjs
• linkedin-api

• 6 You can't do it this way. The script tag gets evaluated well before the controller would ever be initialized. What is the use case for this? Why can't you do whatever you need to do within angular context? – charlietfl Commented Mar 25, 2016 at 18:17
• @charlietfi I have all of the elements in the scope in the html as per normal Angular practice. I need to also populate the LInkedIn payload parameters with that data. I don't know how to get the data from angular (where I know how to source it originally) to the script tags. – rashadb Commented Mar 25, 2016 at 18:23
• Where does the actual data e from? And how? – charlietfl Commented Mar 25, 2016 at 18:24
• 2 @rashadb Then wrap the LinkedIn payload in an angular ponent of some sort and allow it to drive the data management. This is not the correct way to handle it. – David L Commented Mar 25, 2016 at 18:24
• 2 So just initialize whatever linkedIn code you need to inside the $http callback – charlietfl Commented Mar 25, 2016 at 18:32

3 Answers 3

See the snippet just below how to access Angular Scope outside angular :)

EDIT (Afer reading your updated question)

You'll better transcode all your LinkedIn scripts to angular way as kicken suggest you :) :

1. less spagetti code
2. less maintenance
3. more time to watch lol cats on YT !

If you still want to do that way :) ==>

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
  $scope.test = 'toto';
  $scope.hope = 'My Title';
  $scope.array = ['A', 'B', 'C'];
  $scope.payload = {};
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var myFunction = function() {

      var e = document.getElementById('app');     
      var $scope = angular.element(e).scope();
      console.log($scope.payload);
      $scope.payload = {
        "ment": $scope.test,
        "content": {
          "title": $scope.hope,
          "someArray": $scope.array,
          "submitted-url": window.location.href
         }
      };
      $scope.$apply();
    };
</script>
<body ng-app="app" ng-controller="MainCtrl" id="app">
  <p>Hello {{payload}}!</p>
  <button onclick="javascript:myFunction()">Click me</button>  
</body>

Rather than try and pass data from Angular into a generic <script> tag, what you need to do is move the LinkedIn code into Angular.

A quick glance at the JavascriptSDK documentation suggests that this is the key code for making the linked in request:

IN.API.Raw("/people/~/shares?format=json")
  .method("POST")
  .body(JSON.stringify(payload))
  .result(onSuccess)
  .error(onError);

What you can do then is place that code into your angular code at whatever point you need it. You mention the data for your payload es from a $http request so you would likely want this into your $http success handler.

$http({url:'/whatever'}).then(function(response){
    var payload = { /* Generate payload */ };

    IN.API.Raw("/people/~/shares?format=json")
      .method("POST")
      .body(JSON.stringify(payload))
      .result(onSuccess)
      .error(onError);

    function onSuccess(){ /* LinkedIn success */ }
    function onError(){ /* LinkedIn error */ }
});

As others have suggested, moving all of your javascript code into your controller would be the best solution if possible. To do that, your controller would look something like this:

.controller('PostCtrl', function ($scope, $http, $stateParams) {
  $scope.test = "something";
  $scope.hope = 5
  $scope.array = [things];


  $scope.sendData = function () {
    var data = $.param({
      "ment": $scope.test,
      "content": {
      "title": $scope.hope,
      "someArray": $scope.array,
      "submitted-url": window.location.href
    });

    var config = {
      headers : {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
      }
    }

    $http.post('https://api.linkedin./v1/people/~/shares?format=json', data, config)
      .success(function (data, status, headers, config) {
        //it worked
      })
      .error(function (data, status, header, config) {
        //there was an error
    });
  };    
}

Then, in your html, you would put ng-submit="sendData()" on the form you use to share. If the share stuff isn't in a form, you could then just do ng-click="sendData()".