Calling angular function inside controller from Jquery/Javascript

Question

I have a submitDetails function inside controller in app.js file and I want to call it from a javascript function. But its throwing error Error: Submit Details is undefined

clickApply: function(e) {
            
            console.log("hi&hello");
            
                    angular.element('#span').scope().submitDetails();
               
            this.hide();
            this.element.trigger('apply.daterangepicker', this);

        }

$rootScope.submitDetails=function()

can you pls elaborate pls add html and js code in a working format — SAMUEL
– SAMUEL, Commented Mar 14, 2017 at 11:39

Jayant Patil · Accepted Answer · 2017-03-14 12:05:03Z

1

This can be done as below

JS

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope) {
    $scope.sayHello = function() {
      $scope.msg = 'Hello';
    }
  });
  setTimeout(function() {
    var scope = angular.element(document.getElementById("btn")).scope();
    scope.$apply(function() {
      scope.sayHello();
    });
  }, 2000)

HTML

  <div ng-app='myApp'>
    <div ng-controller='ctrl' id='ctrl'>
      {{msg}}
      <button id='btn' ng-click='sayHello()'>
        Go
      </button>
    </div>

  </div>

Hope this will help you Jsfiddle link

answered Mar 14, 2017 at 12:05

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

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

2 Comments

Gonzalo.- Over a year ago

you're mixing vanilla js and angularjs. And you're manipulating DOM from controller

Jayant Patil Over a year ago

@Gonzalo.- no no its just to access controller method from out side of it.

Collectives™ on Stack Overflow

Calling angular function inside controller from Jquery/Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related