How do I get my model to my Directive?

Question

First time playing with directives. I'm trying to make a list that has clickable rows, it's not doing much yet, but I'm stuck trying to figure out how to get the model to the directive.

Here's the directive:

var tsUui=angular.module('ts-user-ui',[]);

tsUui.directive('userList', function(){
    return{
        restrict: 'A',
        template: '<table>'+
                    '<tr>'+
                        '<th>User Name</th>'+
                        '<th>First Name</th>'+
                        '<th>Last Name</th>'+
                        '<th>Email Address</th>'+
                    '</tr>'+
                    '<tr ng-repeat="user in '+users+'" ng-click="selectUser(user, $event)">'+
                        '<td>{{user.UserName}}</td>'+
                        '<td>{{user.FirstName}}</td>'+
                        '<td>{{user.LastName}}</td>'+
                        '<td>{{user.Email}}</td>'+
                    '</tr>'+
                '</table>',
        scope:{
                selectedUser: '=',
                users: '='
        },
        link: function (scope, elem, attrs){
            var users=attrs.usersModel;
            scope.selectedUser = function(user, event){
                event.stopPropagation&&event.stopPropagation();
                event.preventDefault&&event.preventDefault();
                event.cancelBubble=!0;
                event.returnValue=!1;
                selectedUser=user;
            };
        }
    }
});

I have it set up here:

<div user-list data-users-model="Users"></div>

and the page uses this controller:

function userListController($scope, User){
    $scope.users = User.query();
}
tsAdminApp.controller('userListController', ['$scope', 'User', userListController]);

which uses this service:

angular.module('userServices', ['ngResource']).
    factory('User', function($resource){
        return $resource('/admin/user/service',{}, {
            query: {method:'GET', params:{},isArray:true}
        });
    });

I know the controller and service work because I implemented the list without the directive.

When I bring up the page with directive the console gives an error: users is not defined, pointing to the line in my directive with the template: '<tr ng-repeat="user in '+users+'" ng-click="selectUser(user, $event)">'+

How do I get my Users resource in there?

Answer 1

I think you're just overthinking it a bit.

1. Get rid of your scope.selectedUser function in the link. Also get rid of var users=attrs.userModel; because you've already got users in the scope via your isolated scope.

2. call your directive using the scoping you setup:

   <div user-list data-users="users"></div>
   

3. (optional) if you wish to make it even more concise, change your isolate scope to scope:{users:'=userList'} and then you can just say:

   <div user-list="users">
   

4. Remove selectedUser from two way binding in your isolated scope, you don't need it there... unless you wanted to two-way bind that but that'd be weird and I don't recommend it.

5. now replace

   <tr ng-repeat="user in '+users+'" ng-click="selectUser(user, $event)">
   

   with

   <tr ng-repeat="user in users" ng-click="selectedUser = user">
   

Now you've got two way binding, so you know what the user is on this row. If you want to do something when the user is selected, you can still call a function like ng-click="selectUser(user)" and put a function in your scope.