Question

我需要在仪表板中使用使用匿名函数调用控制器的指令显示一个包含两列的表，并且我在angular.js模块中收到错误：

index.html页面

<!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页面

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页面

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

有什么问题？

Answer 1

如果您的指令名为“hpdTable”，则在您的html标记中应使用：

<hpd-table></hpd-table>

该指令的驼峰名称始终与html标记中的“ - ”相同。

修改

您报告的此错误是因为您需要对您的应用模块进行理论化。在js的开头包含这行代码

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

Angular使用匿名函数

1 个答案: