AngularJS Calling Service from Controller Error

Question

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.

Thanks!!

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">
        </label>
    </div>

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

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

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

</div>

Answer 1

U miss this

mainApp.controller('controller_Computer_Type', ['$scope','MyService', function ($scope, MyService)