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

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

angularjs：指令和ng-repeat

1 个答案: