'TypeError object is not a function' when tapping <button> in AngularJS

Question

I have a problem with a button who gave me an error message in the DOM console. The error message is:

TypeError: object is not a function at angular.js:10822 at angular.js:19062 at k.$eval (angular.js:12658) at k.$apply (angular.js:12756) at HTMLFormElement. (angular.js:19061) at angular.js:2843 at r (angular.js:325) at HTMLFormElement.c (angular.js:2842)

I am using AngularJS and here is my HTML code:

<!-- partial-contact.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
    <div id="form-container">
        <!-- Contact Heading -->
        <div class="page-header text-center">
            <h1><i class="fa fa-comment"></i> Kontakt</h1>
            <p>Ved spørsmål skriv ein epost i kontaktskjemaet under.</p>
        </div>
        <!-- Form -->
        <!-- use ng-submit to catch the form submission and use our Angular function -->
        <form id="contactForm" name="contactForm" novalidate ng-submit="contactForm()" ng-controller="contactController" method="post">
        <!-- Name -->
        <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-user"></i></span>
            <input id="personName" class="form-control" type="text" name="personName" ng-model="contactData.personName" placeholder="Namn *" required />
        </div>
        <!-- Email -->
        <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input id="email" class="form-control" type="email" name="email" ng-model="contactData.email" placeholder="Epost *" required />
        </div>
        <!-- Subject -->
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-info"></i></span>
            <input id="subject" class="form-control" type="text" name="subject" ng-model="contactData.subject" placeholder="Emne *" required />
        </div>
        <!-- Email Message & Button -->
        <div class="input-group">
            <div class="input-group-btn">
                <!-- Email Message -->
                <textarea id="emailMessage" type="text" class="form-control" name="emailMessage" ng-model="contactData.emailMessage" ng-minlength=10 ng-maxlength=300 placeholder="Melding..." required></textarea>
                <!-- Button -->
                <button id="submit" type="submit" class="btn btn-primary" ng-click="sendMessage('#/path/' + obj.val1 + '/' + 'obj.val2' + '/' + 'obj.val3' + '/' + 'obj.val4')"><i class="fa fa-angle-double-right"></i></button>
                debug: {{debug.val}}
            </div>
        </div>
        <br>
        </form>
    </div>
</div>
</div>

I am not sure if the problem is the ng-click method in the -element and it doesn't work with ng-submit in the -element. May anyone see any other errors in my code?

Here is my controller:

// contact controller
eventApp.controller('contactController', ['$scope', '$http', function($scope, $http) {
    $scope.obj = {
        val1: '$scope.personName',
        val2: '$scope.email',
        val3: '$scope.subject',
        val4: '$scope.emailMessage'
    };
    $scope.debug = {
        val: ''
    };
    $scope.sendMessage = function(input) {
        $scope.debug.val = input;
    };
}]);

I got my inspiration from this link:

concat scope variables into string in angular directive expresssion

I would suggest that you leave the string building from your function to the .js file, because you shouldn't leave the logic in the html file, just pass the object in ng-click, i.e. sendMessage(obj), and then build the string inside the function. — Michel Tomé
– Michel Tomé, Commented Nov 26, 2014 at 10:30
Yeah, what @MichelTomé said. It is harder to manage and debug, and you want minimal JS mixed with your HTML. Also, it will interpret obj.val1 as the string "$scope.personName" not evaluating it. Can you put this up in a simple jsfiddle that will show the error? — deitch
– deitch, Commented Nov 26, 2014 at 10:32
Do you get the error when clicking the button or when the html first loads? — deitch
– deitch, Commented Nov 26, 2014 at 10:33

Michel Tomé · Accepted Answer · 2014-11-26 10:34:54Z

0

If you want to use it that way, pass the object in the function sendMessage(obj), and then in your js just do:

$scope.obj = {
    val1: 'personName',
    val2: 'email',
    val3: 'subject',
    val4: 'emailMessage'
};
$scope.sendMessage = function(obj) {
    var string = '#/path/' + $scope[obj.val1] + '/' + $scope[obj.val2] + '/' + $scope[obj.val3] + '/' + $scope[obj.val4];
    $scope.debug.val = string;
};

JavaScript objects are treated like arrays, so $scope[obj.val1] == $scope.personName, because of the value of $scope.obj.val1.

answered Nov 26, 2014 at 10:34

Michel Tomé

3892 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

'TypeError object is not a function' when tapping <button> in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related