如何将变量从 Angular 控制器传递到 html <script></script>？

Question

我的 angular 控制器中有变量，我想获取变量中的数据并在我的 html 中放入一个脚本标签，但我不知道如何执行它.我这样做是因为我想拍照并通过分享按钮将其上传到我的 LinkedIn post。根据文档 here，如果我可以将数据从我的控制器获取到他们的脚本标签中，这似乎很简单。

例如：

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>

///////////////////////// 感谢您的大量评论。这是我在 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>

我还是觉得哪里不对。但是什么？我是否正确使用了 http，因为到目前为止我只使用 Angular 完成了它。

Answer 1

查看下面的代码片段如何访问 Angular 外部范围 angular :)

编辑（阅读您更新的问题后）

您最好按照 kicken 建议的方式将所有 LinkedIn 脚本转码为 angular :) :

更少的意大利面代码
更少维护
有更多时间在 YT 上观看 lol 猫 !

如果你还想那样做:) ==>

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>

Answer 2

与其尝试将数据从 Angular 传递到通用 <script> 标签，不如将 LinkedIn 代码移至 Angular.

快速浏览 the JavascriptSDK documentation 表明这是在请求中创建链接的关键代码：

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

然后您可以做的是在您需要的任何时候将该代码放入您的 angular 代码中。您提到有效载荷的数据来自 $http 请求，因此您可能希望将其放入 $http 成功处理程序中。

$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 */ }
});

Answer 3

正如其他人所建议的那样，如果可能，将所有 javascript 代码移动到控制器中将是最佳解决方案。为此，您的控制器将如下所示：

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


  $scope.sendData = function () {
    var data = $.param({
      "comment": $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.com/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
    });
  };    
}

然后，在您的 html 中，您可以将 ng-submit="sendData()" 放在您用于共享的表单上。如果共享内容不是表格形式，那么您可以执行 ng-click="sendData()".

如何将变量从 Angular 控制器传递到 html <script></script>？

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

javascript

linkedin

angularjs