angularjs：指令和ng-repeat

Question

我想显示HomeController的用户以及该“注销”按钮。 我尝试使用指令，但仅显示按钮没有其他内容。...这是我的代码。

这是指令

(function () {
    'use strict';
    angular.module('chatApp').directive('userDirective', function () {
        return {
            restrict: 'E',
            scope: {
                userList: '='
            },
            templateUrl: 'src/home/user.tpl.html'
        };
    });
})();

这是指令的模板

<div>
    <img ng-src="{{userList.icon}}">
    <p>{{userList.name}}</p>
</div>

这是HomeController

(function () {
    'use strict';
    function HomeController($scope) {
        $scope.homeController = {};
        $scope.homeController.users = [
            {
                icon: 'img/online.png',
                name: 'asdasd'
            },
            {
                icon: 'img/online.png',
                name: 'asdasd'
            },
            {
                icon: 'img/online.png',
                name: 'asdasd'
            },
            {
                icon: 'img/online.png',
                name: 'asdasd'
            }
        ];
    }

    angular.module('chatApp').controller('homeController', HomeController);
})();

这是控制器的模板

<div id="wrapper">
    <input type="button" id="logOut" value="Sign Out">
    <div ng-repeat="user in homeController.users">
        <user-directive userList="user"></user-directive>
    </div>
</div>

Answer 1

Angular将属性名称转换为以短划线分隔的形式。 在您的HTML中，使用user-list而不是userList 。

<user-directive user-list="user"></user-directive>

从Angular的文档中 ：

Angular对元素的标记和属性名称进行归一化，以确定哪些元素与哪些指令匹配。 我们通常通过区分大小写的camelCase规范化名称（例如ngModel）来引用指令。 但是，由于HTML不区分大小写，因此我们以小写形式引用DOM中的指令，通常在DOM元素（例如ng-model）上使用破折号分隔的属性。