CODEWITHSUNDEEP
javascriptangularjs
Ian Mukunya Douglas
Ian Mukunya Douglas

Reputation: 43

executing angular js in a function

im trying to execute the function below that has angular js code in it.

function updateData() {

            var crudApp = angular.module("crudTest", []);

            crudApp.service("editData", function() {
                var editArray = ["BLAUS", "Blauer See Delikatessen", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", ""];

                return {
                    editArrayy : editArray
                };

            });
            crudApp.controller = ("modalContent",
            function($scope) {
                $scope.inputs = editData.editArrayy;

            });

        }

however the error is as below:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=crudTest&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A17%3A350)

html structure is:

<html ng-app="crudTest">
   <body>
      <div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Edit Customer</h4>
            </div>
            <div class="modal-body" ng-controller="modalContent">
                <form ng-repeat="input in inputs">
                    <span>Customer ID</span>
                    <input type="text" value={{input}} />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
   </body>
</html>

Upvotes: 0

Views: 47

Answers (2)

wvdz
wvdz

Reputation: 16641

I believe the problem is caused by wrapping your angular code into a updateData() method.

That's why you get the error: Failed to instantiate module crudTest when you reference the crudTest module in your ng-app directive.

Why do you wrap it in a function and where is this function called?

Upvotes: 0

Eugenio Cuevas
Eugenio Cuevas

Reputation: 11078

You have to inject editData service into controller:

 crudApp.controller = ("modalContent",
            function($scope,editData) {
                $scope.inputs = editData.editArrayy;

            });

Upvotes: 0

Related Questions