Question

我真的以为我慢慢得到了AngularJs的悬念 - 但似乎我仍然完全是绿色的......

我尝试组合一个小小的演示来显示ng-repeat指令，现在没有可以工作 - 我只是得到一个空白屏幕，我有没有线索为什么......

任何人都可以开导我吗？

这是我的HTML文件：

<!doctype html>
<head>
    <!-- include link to Angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

    <!-- include app.js -->
    <script src="app.js"></script>
</head>
<body ng-app="myapp">
    <div ng-controller="mycontroller as vm">
        <label>My company:</label>
        <hr>
        <div id="divTeam" ng-repeat="m in vm.team">
            <p>
                {{m.firstname}} {{m.name}} ({{m.tag}})
            </p>
        </div>
    </div>
</body>

这是我的app.js文件（同一目录）：

    var app = angular.module('myapp', []);

    app.controller('mycontroller', function ($scope) {
            $scope.team = [
                { name: "Brown", firstname: "Leo", tag: "lebr" },
                { name: "Smith", firstname: "Adrian", tag: "adsm" },
                { name: "Loflin", firstname: "Wes", tag: "welo" },
                { name: "Hackett", firstname: "John", tag: "joha" }
            ]
        }
    );

我不明白......

我正在创建名为myapp
我在<body ng-app="myapp">标记
我正在创建一个名为mycontroller
的角色控制器
我在<div ng-controller="mycontroller as vm">标记
我在$scope
我希望能够使用ng-repeat="m in vm.team"指令迭代这个对象数组

但我现在得到的只是一个空白的屏幕，标题是＆＃34;我的公司：＆＃34; - 别无其他......

我检查了Angular JS文件的URL - 据我所知，这是正确的。
我在IE或Chrome中检查了Javascript控制台 - 没有任何错误或信息消息可以在任何地方看到.....
如果我只在我的HTML中添加一个像{{1+2}}这样的简单表达式，它确实会被评估为＆＃34; 3＆＃34;，所以我非常确定Angular已启动并正在运行.. ..

那我错过了什么？（我是一个长期的.NET开发人员，总是在努力解决所有问题......）

Answer 1

您使用controllerAs语法，在撰写ng-controller="mycontroller as vm"时，您必须将数据绑定到this而不是$scope

   app.controller('mycontroller', function ($scope) {
        this.team = [
            { name: "Brown", firstname: "Leo", tag: "lebr" },
            { name: "Smith", firstname: "Adrian", tag: "adsm" },
            { name: "Loflin", firstname: "Wes", tag: "welo" },
            { name: "Hackett", firstname: "John", tag: "joha" }
        ]
    }
);

或删除as语法。

Answer 2

“团队”位于$ scope中，因此您可以直接在视图中调用“团队”：

<body ng-app="myapp">
    <div ng-controller="mycontroller as vm">
        <label>My company:</label>
        <hr>
        <div id="divTeam" ng-repeat="m in team">
            <p>
                {{m.firstname}} {{m.name}} ({{m.tag}})
            </p>
        </div>
    </div>
</body>

Answer 3

一种方法是将this绑定到vm，如下所示（如John Papa Angular 1 Style Guide）：

JS控制器：

var app = angular.module('myapp', []);

app.controller('MyController', function () {
    var vm = this;

    vm.teams = [
        { name: "Brown", firstname: "Leo", tag: "lebr" },
        { name: "Smith", firstname: "Adrian", tag: "adsm" },
        { name: "Loflin", firstname: "Wes", tag: "welo" },
        { name: "Hackett", firstname: "John", tag: "joha" }
    ];
});

这里我们不需要$scope依赖，因为我们不会使用它。

在HTML中，您使用以下语法：

<div ng-controller="MyController as mc">
    <div ng-repeat="team in mc.teams">
        <p>
            {{team.firstname}} {{team.name}} ({{team.tag}})
        </p>
    </div>
</div>

第二种方法是使用$scope，如下所示：

var app = angular.module('myapp', []);

app.controller('MyController', function ($scope) {
    $scope.teams = [
        { name: "Brown", firstname: "Leo", tag: "lebr" },
        { name: "Smith", firstname: "Adrian", tag: "adsm" },
        { name: "Loflin", firstname: "Wes", tag: "welo" },
        { name: "Hackett", firstname: "John", tag: "joha" }
    ];
});

我们在这里使用$scope。

在HTML中是这样的：

<div ng-repeat="team in teams">
    <p>
        {{team.firstname}} {{team.name}} ({{team.tag}})
    </p>
</div>

不要忘记将特定的HTML页面与适当的控制器绑定。

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/myPage', {
            templateUrl: 'views/myPage.html',
            controller: 'MyController'
        }).
        otherwise({
            redirectTo: '/404'
        });
}]);

无论您决定什么，都可以使用$routeProvider或$stateProvider。

Answer 4

您只需要从vm重新提醒vm.team 这是一个有效的plunker

AngularJs的奥秘

4 个答案: