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）上使用破折號分隔的屬性。