CODEWITHSUNDEEP
angularjscontrolleranonymous-function
Reginaldo Marcelo dos Santos
Reginaldo Marcelo dos Santos

Reputation: 175

Angular using anonymous function

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?

Upvotes: 0

Views: 1725

Answers (1)

Renan Ferreira
Renan Ferreira

Reputation: 2150

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);

Upvotes: 2

Related Questions