pass data to angular controller from a global function

Question

See example below and the TODO in the send function : How can I assign the label value in the global send function to dropboxController dropbox.label

<!DOCTYPE html>
<html>
  <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">

      window.onload=function() { 
        $('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
        angular.module('dropboxApp', [])
                .controller('dropboxController', function () {
                    var dropbox = this;
                    dropbox.label = "hello angular";
                });
        angular.bootstrap($('#AddIn'), ['dropboxApp']);
      }

      function send(label)
      {
        //TODO assign label value to dropboxController dropbox.label
      }
      </script>
  </head>
  <body>
    <div id="AddIn"></div>
    <button onclick="send('new label');">Send</button>
  </body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:07

Use angular.element and get scope of specific dom element and apply label to it.

Change dropbox.label to $scope.label and inject $scope in controller because this and $scope are different. Check 'this' vs $scope in AngularJS controllers

Keep in Mind: Here I have used myDiv which has scope for angular and added id in append div line.

It's better to use ng-click instead of onclick if possible.

window.onload = function() {
  $('#AddIn').append("<div id='myDiv' ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{label}}</div>");
  angular.module('dropboxApp', [])
    .controller('dropboxController', function($scope) {
      var dropbox = this;
      $scope.label = "hello angular";
    });
  angular.bootstrap($('#AddIn'), ['dropboxApp']);
}

function send(label) {
  var scope = angular.element($("#myDiv")).scope();
  scope.$apply(function() {
    scope.label = label;
  })
  console.log(scope.label);
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
  <div id="AddIn"></div>
  <button id="myButton" onclick="send('new label');">Send</button>
</body>

</html>

actually the button is only here to help me call the send function, it will disappear eventually. What I really want to do is pass data from the send function to the controller! — Tomd, Oct 27 '15 at 11:51
This works but the downside of this solution is that I have to be aware of my HTML in javascript (use myDiv), in order to get to the scope. I was wondering if i could pass the value through angular.module('dropboxApp').controller('dropboxController') — Tomd, Oct 27 '15 at 12:54
If you are injecting `html` using javascript then probability that you can set it somewhere else. It is not recommended to pass value through `controller` — Sarjan Desai, Oct 27 '15 at 13:07

pass data to angular controller from a global function

1 Answers1