executing angular js in a function

Question

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>

Eugenio Cuevas · Accepted Answer · 2015-01-13 12:14:48Z

0

You have to inject editData service into controller:

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

            });

answered Jan 13, 2015 at 12:14

Eugenio Cuevas

11.1k3 gold badges33 silver badges51 bronze badges

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

Comments

wvdz · Accepted Answer · 2015-01-13 12:17:30Z

0

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?

answered Jan 13, 2015 at 12:17

wvdz

16.2k4 gold badges60 silver badges97 bronze badges

Collectives™ on Stack Overflow

executing angular js in a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related