Angular using anonymous function

Question

I need to display a table with two columns in a dashboard using a directive that call a controller using anonymous function and I am receiving errors inside the angular.js module:

index.html page

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-animate.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.min.js"></script>

<script type="application/javascript" src="TableView.js"></script>
    <body ng-app="myNgApp">
        <div >
            <hpdTable></hpdTable>
        </div>
    </body>
</html>

TableView.js page

angular.module('myNgApp').directive('hpdTable', TableView);

function TableView(){

        return {
            restrict: 'E',
            controller: function ($scope){
                $scope.names = [
                                    {
                                    "Name": "Security",
                                    "Number": "546543254"
                                    },
                                    {
                                    "Name": "System",
                                    "Number": "123456789"
                                    },
                                    {
                                    "Name": "Cloud",
                                    "Number": "9876564321"
                                    }
                                ];
            },
            templateUrl: 'TableView.html'
  };
}

TableView.html page

<table>
  <tr ng-repeat="n in names">
    <td>{{ n.Name }}</td>
    <td>{{ n.Number }}</td>
  </tr>
</table>
</div>

What is wrong?

Thanks dipseh but I am still receiving an error Uncaught Error: [$injector:nomod] errors.angularjs.org/1.4.8/$injector/nomod?p0=myNgApp(anonymous function) @ angular.js:38(anonymous function) @ angular.js:2005b @ angular.js:1929(anonymous function) @ angular.js:2003(anonymous function) @ TableView.js:1 angular.js:38 Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.4.8/$injector/……ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) — Reginaldo Marcelo dos Santos
– Reginaldo Marcelo dos Santos, Commented Dec 15, 2015 at 18:11
Can you please, make a plnkr with your code? It help to reproduce your issue. — robe007
– robe007, Commented Dec 15, 2015 at 18:15

Renan Ferreira · Accepted Answer · 2015-12-15 19:07:15Z

2

If your directive is called "hpdTable", in your html tag you should use:

<hpd-table></hpd-table>

The camel-case name of the directive is always separed with "-" in the html tag.

EDIT:

This error you are reporting is because you need to inicialize your app module. Include this line of code in the beginning of your js

angular.module('myNgApp', []);
angular.module('myNgApp').directive('hpdTable', TableView);

edited Dec 15, 2015 at 19:07

answered Dec 15, 2015 at 17:24

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

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

4 Comments

Reginaldo Marcelo dos Santos Over a year ago

Uncaught Error: [$injector:nomod] errors.angularjs.org/1.4.8/$injector/nomod?p0=myNgApp(anonymous function) @ angular.js:38(anonymous function) @ angular.js:2005b @ angular.js:1929(anonymous function) @ angular.js:2003(anonymous function) @ TableView.js:1 angular.js:38 Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.4.8/$injector/……ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463)

Reginaldo Marcelo dos Santos Over a year ago

This way?? angular.module('myNgApp', []).directive('hpdTable', TableView);

Renan Ferreira Over a year ago

Edited again. I would do separate, just because, usually we inicialize the module in a different file from the directive.

Reginaldo Marcelo dos Santos Over a year ago

Great. Now I am getting another error message: angular.js:10765 XMLHttpRequest cannot load file:///C:/dev/la/tableView.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10765r @ angular.js:10558g @ angular.js:10268(anonymous function)

Collectives™ on Stack Overflow

Angular using anonymous function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related