如何让我的模型符合我的指令？

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?

如何获取我的用户资源?

1 个解决方案

#1

I think you're just overthinking it a bit.

我想你只是稍微过度思考它。

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.

摆脱链接中的scope.selectedUser函数。还要摆脱var users = attrs.userModel;因为您已经通过隔离范围获得了范围内的用户。
call your directive using the scoping you setup:

使用您设置的范围调用您的指令:
```
<div user-list data-users="users"></div>
```
(optional) if you wish to make it even more concise, change your isolate scope to scope:{users:'=userList'} and then you can just say:

(可选)如果您希望使其更简洁,请将您的隔离范围更改为范围:{users:'= userList'}然后您可以说:
```
<div user-list="users">
```
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.

从你的隔离范围中的双向绑定中删除selectedUser,你不需要它...除非你想双向绑定,但这很奇怪,我不推荐它。

now replace

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

with

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

现在用'+ users +'替换用

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.

现在你有双向绑定,所以你知道用户在这一行上是什么。如果您想在选择用户时执行某些操作,您仍然可以调用类似ng-click =“selectUser(user)”的函数并在您的范围内放置一个函数。

#1