Angularjs: Dependency injection. "is not a function" error

Question

I'm having my first go at dependency injection. My goal is to eventually just enable some simple communication between two controllers. I'm not even getting far enough to even worry about handling the communication with the second controller. I'm getting an "is not a function error" for ContactMessages.AddNewContact(response.data);

When I use self.ContactMessages.AddNewContact(response.data); I get "Cannot read property 'AddNewContact' of undefined"

I just want to invoke the AddNewContact function of the ContactMessages factory.

This should be a fairly basic procedure.

<html ng-app="myApp"><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var userName = 'some email'; //pseudo code
var app = angular.module('myApp', []);

app.factory('ContactMessages', [function() 
{   var tmpContact = {};

    this.AddNewContact = function(objContact){
        this.tmpContact = objContact;
    };
    return tmpContact;
}]);

app.controller('ActionsController', function ($scope, $http, ContactMessages){
        this.newContact = {
            Email: "",
            Type: "",
            Frequency: "",
            UserName: userName
        };
        var self = this;

        this.AddContact=function()
        {   

            $http({
            method: 'POST',
            url: 'some url', //pseudo code
            data: this.newContact,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
            }).then(function successCallback(response) 
                {   if(angular.isObject(response.data))
                        self.ContactMessages.AddNewContact(response.data);
                }, function errorCallback(response) {

            });
        };
    }); 
</script>
</head>

<body ng-controller="ActionsController as ActCtrl">
<div>
    <form name="frmAddContact" noValidate>
        <input placeholder="Contact Email" type="email" ng-model="ActCtrl.newContact.Email" required></input>
        <select ng-model="ActCtrl.newContact.Type"  required>
            <option value="">Contact Type</option>
            <option value="COLLEAGUE">Colleague</option>
            <option value="FRIEND">Friend</option>
            <option value="FAMILY">Family</option>
        </select>
        <select ng-model="ActCtrl.newContact.Frequency"  required>
            <option value="">Contact Frequency</option>
            <option value="ANY">Any Time</option>
            <option value="WEEKLY">Weekly</option>
            <option value="MONTHLY">Monthly</option>
            <option value="QUARTERLY">Quarterly</option>
            <option value="YEARLY">Yearly</option>
        </select>
        <div >
            <button ng-click="ActCtrl.AddContact()" ng-disabled="frmAddContact.$invalid" >Add Contact</button>
        </div>
    </form>
</div></body></html>

I've isolated the issue to the inability to call ContactMessages.AddNewContact from inside the $http request. I can call said function from inside AddContact. — Pablo Francesca
– Pablo Francesca, Commented Jul 4, 2016 at 5:23

Gayathri Mohan · Accepted Answer · 2016-07-04 04:10:58Z

1

Hi change your Factory like this

app.factory('ContactMessages', [
    function () {
        var o = {};

        o.AddNewContact = {};
        return o;
    }
]);

for refrence https://plnkr.co/edit/sYSJ5ZOVQUX0ctir2EmM?p=preview

edited Jul 4, 2016 at 4:10

answered Jul 4, 2016 at 3:58

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

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

2 Comments

Pablo Francesca Over a year ago

Made the changes as suggested. This results in the same error messages as before.

Gayathri Mohan Over a year ago

var self = this; u have to move on top not inside the this.AddContact=function() , before the this.newContact move your var self = this;

Collectives™ on Stack Overflow

Angularjs: Dependency injection. "is not a function" error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related