Sandeep Hari Hara Bhat Sandeep Hari Hara Bhat - 4 months ago 8
AngularJS Question

Unrefrenced function Error in Angular/Nodejs

I am having issue with a function being attached to a button through onclick(). I have used UI-routing to attach a controller to a html page with ionic tags. Here is the code snippet --

app.js

var havyakkaMaduve = angular.module('havyakka_maduve', ['ionic','ngStorage','ngCordova','ngCordovaOauth'])

havyakkaMaduve.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

// setup an abstract state for the tabs directive
.state('home', {
url: '/',
templateUrl: 'homePage.html',
controller: 'LoginController'
})
.state('registration', {
url:'/reg',
templateUrl:'templates/registration.html',
controller:'UserDetailsController'
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise("/reg");

});

havyakkaMaduve.controller("UserDetailsController",["$scope","$http", function($scope,$http) {
console.log("Inside userDetails Controller");
$scope.submitDetails = function () {
console.log("Submitting details");
$http.get("/test").success(function(response){
console.log("Test success");
});
};


}]);


Registration.html

<ion-pane>
<ion-content class="padding">
<div class="reg_list">
<label class="item item-input">
<span class="input-label">Full Name</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Mane</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Gotra</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date" required>
</label>
<label class="item item-input">
<span class="input-label">Education</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Occupation</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Father's Name</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Mother's Name</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Current Location</span>
<input type="text" required>
</label>
<label class="item item-input">
<span class="input-label">Upload Image</span>
<input type="file" required>
</label>
<label class="item item-input">
<span class="input-label">Digital Identity</span>
<input type="url" required>
</label>
<label class="item item-input">
<span class="input-label">About Me</span>
<input type="text">
</label>
</div>
<button class="button button-block button-positive" onclick="submitDetails">Submit</button>
<div>
</div>





Somebody please tell me where I am going wrong as I don't see any issue here yet I get "ReferenceError: submitDetails is not defined". I see the issue when the "Submit" button is clicked upon.Thanks.

Answer

You have to use ng-click instead of onclick, and the function should be called with parentheses:

<button class="button button-block button-positive" ng-click="submitDetails()">Submit</button>
Comments