Question

我正在使用单页角度应用程序。我已经在我的typescript文件中定义了静态数组，但是当我运行我的解决方案时，我的数组值没有绑定在我的视图上，尽管我可以看到我的视图。以下是我的代码。

 let mainAngularModule = angular.module("mm", ['ngMaterial', 'ngRoute']);

    mainAngularModule.config(routeConfig);

    routeConfig.$inject = ['$routeProvider'];
    function routeConfig($routeProvider, $locationProvider) {
        $routeProvider
            .when('/UserDefinedElement', {
                templateUrl: 'LinkType.html',
                controller: 'linktController as LTController'
            })
       .when('/PersonalPreferences', {
            templateUrl: 'PersonalPreference.html',
            controller: 'personalpreferencesController as PPController'
        })
}

我在相同的ts文件中定义了类，如下所示

class LinkTypeController {
    constructor() {

        $scope.items = [
            { Name: "LinkType1", Address: "NC"},
            { Name: "LinkType2", Address: "NY"}
        ];           

    }
}

mainAngularModule.controller("linktController", LinkTypeController);

我的Linktype HTML代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
        <div class="demo-md-panel-content">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  ng-repeat="x in items">
                        <td>{{x.Name}}</td>
                        <td>{{x.Address}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
</body>
</html>

我是否也需要在我的视图中编写ng-controller？

我的主要html文件如下

<!DOCTYPE html>
<html>

<head>

</head>

<body ng-app="mm">
    <div layout="row" layout-xs="column">
        <div flex="18">
            <md-sidenav style="margin-top: -30px;" md-component-id="left" class="md-sidenav-left" md-is-locked-open="$mdMedia('min-width: 333px')">
                 <md-divider></md-divider>
                <md-subheader class="md-no-sticky">User Preferences</md-subheader>
                <md-list-item href="#/PersonalPreferences">
                    <span>Personal Preferences</span>
                </md-list-item>
                <md-list href="#/UserDefinedElement">
                    <span>Model Links</span>
                    <md-list-item href="#/UserDefinedElement">
                        <span>User Defined Element</span>
                </md-list>
            </md-sidenav>

        </div>
        <div flex>
            <md-content layout-padding>
                <div ng-view></div>
            </md-content>
        </div>
    </div>
</body>

</html>

Answer 1

由于您在路由中使用ControllerAs语法，因此您必须在现有代码中进行两处更改。

在控制器功能而不是$ scope.items中使用this.items
在ng-repeat中，而不是ng-repeat =“x in items”使用ng-repeat =“x in LTController.items”

Answer 2

您需要将ng-app绑定到html页面。如果显示的HTML只是您的模板，则不应包含html，head和body标记。

ngRoute无法绑定列表中的数据

2 个答案: