Search code examples
javascriptangularjslinkedin-api

How do you pass variables from an Angular controller to a html <script></script>?


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 = {
  "comment": $scope.test "content": {
    "title": $scope.hope,
    "someArray": $scope.array,
    "submitted-url": window.location.href
  }
};
</script>

////////////////////////// Thanks for the copious comments. 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.com/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.


Solution

  • 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.com/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 = {
            "comment": $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>