angularjs: directive and ng-repeat

Question

I want to show users from HomeController together with that Sign Out button. I tried using directive but it only shows button nothing else....Here is my code.

This is directive

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

This is template for directive

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

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

Here is template for 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>

Anid Monsur · Accepted Answer · 2015-09-16 23:12:51Z

1

Angular converts attribute names to a dash-delimited form. In your HTML, use user-list instead of userList.

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

From 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).

answered Sep 16, 2015 at 23:12

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs: directive and ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related