Function is not defined inside controller, angularJS

Question

I am trying to execute a function after a video ends, the function is inside an angular controller. The function is called, but I get an error stating:

ReferenceError: postVendor is not defined

Here is the calling javascript:

        $.noConflict();
        jQuery(document).ready(function ($) {
            var api = flowplayer();
            api.bind("finish", function (e, api) {
                var data = "true";
                var url = "someurlhere";
                postVendor(url, data);
            });
        });

and here is my module/controller (same file):

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

registrationModule.controller("vendorCtrl", function ($scope, $http) {
    $scope.postVendor = function (url, data) {
        $http.post(url, data).success(function (data) { console.log(data) }).error(function (data) { console.log(data)  });
    };

});

in my html:

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="registrationModule">

<body ng-controller="vendorCtrl">

I am using angular 1.2.25.

Any ideas on how to get the function called properly?

Community · Accepted Answer · 2017-05-23 11:44:05Z

1

1.Please make sure that jQuery is loaded before angular.js

2.Make sure that your vendorCtrl return $scope.postVendor (you can do that by adding) :

  return {
    postVendor : $scope.postVendor 

  };

Please see example

  $(document).ready(function () {
    
     
     angular.element('#angularController').controller().doSomthing("Hello ", "from jquery")
  
  });


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

app.controller('firstCtrl', function($scope){

  $scope.doSomthing = function(a,b){
    alert(a+b);
  };
  
  
  
 return {
    doSomthing: $scope.doSomthing
    
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="app"  >
  <div  id="angularController" ng-controller="firstCtrl">

      </div>
</body>

That should helps

  $.noConflict();
    jQuery(document).ready(function ($) {
        var api = flowplayer();
        api.bind("finish", function (e, api) {
            var data = "true";
            var url = "someurlhere";
           angular.element('body').controller().postVendor(url, data);
        });
    });

for more info please see here Call Angular JS from legacy code

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 24, 2014 at 16:38

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

1 Comment

user4075691 Over a year ago

thanks, I was just trying variations of this but get: Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

Collectives™ on Stack Overflow

Function is not defined inside controller, angularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related