AngularJS v1.4 function call from javascript

Question

I need to call an AngularJS function call from javascript-side.

The below is the function I want to call from javascript.

https://github.com/aws-samples/aws-iot-examples/blob/master/mqttSample/js/app.js

AppController.$inject = ['$scope'];
AppController.prototype.createClient = function() {

    var options = {
      clientId : this.clientId,
      endpoint: this.endpoint.toLowerCase(),
      accessKey: this.accessKey,
      secretKey: this.secretKey,
      regionName: this.regionName
    };
    var client = this.clients.getClient(options);
    if (!client.connected) {
      client.connect(options);
    }
};

My javascript

<body>
    <div id='myid' class="container" ng-app="awsiot.sample" ng-controller="AppController as vm">
  ....
  <div class="form-group">
    <button class="btn btn-primary" id='myclick' ng-click="vm.createClient()" >Create Client</button>  <-- working! -->      
  </div>  

....

<script>
  angular.element('#myid').scope().createClient(); // not working!
</script>

Can you help me?

Based on script tag shown you might be calling that before angular has even compiled the controller and the dom. Any errors in console? — charlietfl
– charlietfl, Commented Dec 13, 2018 at 20:07
Looking up elements via selectors is not supported by angular.element. Also controller scope is created during the AngularJS run phase which occurs well after DOMContentLoaded. This looks like an XY Problem. What are you trying to accomplish here? Maybe there is a better way than calling a controller function from outside the AngularJS framework. — georgeawg
– georgeawg, Commented Dec 13, 2018 at 20:56
@georgeawg To call createClient() in angular is what I want to accomplish :) — Martin
– Martin, Commented Dec 22, 2018 at 12:54

ABOS · Accepted Answer · 2018-12-13 21:03:10Z

1

try this:

angular.element(document.querySelector('#myid')).controller().info();

demo https://stackblitz.com/edit/angularjs-wxjhgd you can tweak it to suit your needs

edited Dec 13, 2018 at 21:03

answered Dec 13, 2018 at 20:09

ABOS

3,8413 gold badges19 silver badges25 bronze badges

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

3 Comments

georgeawg Over a year ago

“While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.”

ABOS Over a year ago

I already included the essential part ... Other parts are straightforward :)

Martin Over a year ago

Thanks ABOS I tried but the result is, (index):117 Uncaught TypeError: Cannot read property 'info' of undefined at (index):117 (anonymous) @ (index):117

georgeawg · Accepted Answer · 2018-12-22 18:55:31Z

0

To call createClient() in angular is what I want to accomplish

Put the call in the $onInit function of the controller:

function AppController() {
    this.$onInit = function() {
        this.createClient();
    });
}

For more information, see AngularJS $compile Service API Reference - Life-Cycle Hooks.

answered Dec 22, 2018 at 18:55

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

AngularJS v1.4 function call from javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related