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?

Answer 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

Function is not defined inside controller, angularJS

Question

1 answers

solution1
1 ACCPTED 2014-09-24 16:38:37

Function is not defined inside controller, angularJS

Question

1 answers

solution1 1 ACCPTED 2014-09-24 16:38:37

solution1
1 ACCPTED 2014-09-24 16:38:37