The absence of a function definition within a controller is a common issue in AngularJS

Question

The absence of a function definition within a controller is a common issue in AngularJS

I have been attempting to run a function once a video finishes playing. The function is located within an angular controller, but I am encountering an error message that reads:

ReferenceError: postVendor is not defined

Below is the JavaScript code where the function is being called:

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

Here is the module/controller setup in the 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)  });
    };

});

Within my HTML markup:

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

<body ng-controller="vendorCtrl">

The version of Angular I am using is 1.2.25.

If anyone has any suggestions on how to ensure the proper execution of the function, it would be greatly appreciated!

javascript asp.net angularjs function controller

Answer 1

Answer №1

1. Please ensure jQuery is loaded before angular.js

2. Confirm that your vendorCtrl returns $scope.postVendor (you can achieve this by adding):

  return {
    postVendor: $scope.postVendor 
  };

Refer to the example below:

  $(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>

This should be helpful

$.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 information, please visit Call Angular JS from legacy code

Answer 2

1. Please ensure jQuery is loaded before angular.js

2. Confirm that your vendorCtrl returns $scope.postVendor (you can achieve this by adding):

  return {
    postVendor: $scope.postVendor 
  };

Refer to the example below:

  $(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>

This should be helpful

$.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 information, please visit Call Angular JS from legacy code

The absence of a function definition within a controller is a common issue in AngularJS

Answer №1

Similar questions

Is it possible for a Vue data property to have a value that is determined by another Vue data property object?

How can I attach a jQuery plugin to a textbox with a changing class name?

Unexpected behavior: jQuery AJAX request isn't triggering the alert function as expected

Authentication using the MVC standard combined with webApi

Is it possible to establish a scope for jquery.ajaxSetup()?

To identify the dynamically inserted and generated div element amidst the other elements on the page

Are there any plugins available that can create a Ken Burns effect using JQuery?

What is causing the sorting table to fail in React when using useState?

LeafletJS tiles are only loaded once the map is being actively moved

Encountering a Template Parse Error after running the ng build --prod command

Netbeans lacks compatibility with JavaScript

Is it advisable to Utilize ES6 Classes in Javascript for Managing React State?

Functionality in Three.js that involves selecting nearby objects with an event handler and ensuring that the self object is

Framer Motion's "repeatType" property triggering a TypeError

Are there any techniques for running unit tests on a Vue.js transition?

What is the process for swapping out a file input tag with a specific file already chosen?

Having trouble retrieving mobiscroll instance in Angular with Ionic

Is it necessary to enable validation for an Angular reactive form toggle?

What is the best way to transform a JavaScript file retrieved from a remote server (returned as a string) into a standard JavaScript object in a Node

Encountering an unexpected token in Javascript when using conditionals