Home AngularJS Calling Service from Controller Error
Reply: 0

AngularJS Calling Service from Controller Error

user3980 Published in July 20, 2018, 4:59 am

I am not sure why I am getting this error, could someone please explain this to me?

TypeError: Cannot read property 'getValueByName' of undefined at Object. (http://localhost:63342/Hardcore%20Gaming%20JS/scripts/MainApp.js:175:32) at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:4473:17) at extend.instance (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:9093:34) at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8205:36) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13) at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7512:30) at link (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7) at invokeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8746:9) at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8246:11) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13)

I have created a service in order to store, update, and return the values of a parts list. I am trying to update the partsList after they click on the different radio buttons.

Also if you know how to make these selections persist through different view changes that would be awesome to know about as well.


Here is my Service Code:

mainApp.service('MyService', function () {
    var partsList = [
        {name: "selected_computer_type", value: ''},
        {name: "selected_computer_size", value: ''},
        {name: "selected_computer_color", value: ''}

    //iterates through partslist, finds object that matches and sets the new value
    this.setValue = function (name, value) {
        for (var i = 0; i < partsList.length; i++)
            if (partsList[i].name == name) partsList[i].value = value;

    this.getValueByName = function (name) {
        for (var i = 0; i < partsList.length; i++)
            if (partsList[i].name == name)
                return partsList[i].value;
        return "";

Here is my Controller Code:

mainApp.controller('controller_Computer_Type', ['$scope', function ($scope, MyService) {
    //Computer Type Selected
    $scope.current = MyService.getValueByName("selected_computer_type");

    //Updates the partsList
    $scope.change = function () {
        var value = $scope.current.toString();
        MyService.setValue("selected_computer_type", value);

    //List of options for computer type
    $scope.types = [
        //TODO: update url images to reflect personal gaming and business profiles
        {name: 'Personal', value: 'personal', url: 'images/intel 700/ABFS_1_201706141903610053.jpg'},
        {name: 'Gaming', value: 'gaming', url: 'images/amd 500/83-230-100-02.jpg'},
        {name: 'Business', value: 'business', url: 'images/intel 500/83-101-369-z01.jpg'}

Here is my View Code:

<div ng-controller="controller_Computer_Type">

    <h2>Type of Computer</h2>

    <!--Radio Button Options Using Images-->
    <div class="row">
        <label class="col-sm-4" ng-repeat="option in types">
            <input type="radio" name="radio_type" ng-model="$parent.current" ng-change="change()" value="{{option.value}}" hidden/>
            <img class="img-thumbnail" src="{{option.url}}" alt="{{option.value}}">
            <img class="overlay" src="images/greenCheck.png">

    <!--Debugging purposes-->
    <p>Current RB - {{current}}</p>

    <p>Current DD - {{selectedItem.name}}</p>

    <p>Message - {{message}}</p>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306493 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO