javascript - 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);
})();

这是 Controller 的模板

<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's docs :

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).