Question

第一次玩指令。我正在尝试制作一个包含可点击行的列表，但它还没有做太多，但我一直试图找出如何将模型转换为指令。

这是指令：

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;
            };
        }
    }
});

我在这里设置了它：

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

，页面使用此控制器：

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

使用此服务：

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

我知道控制器和服务工作，因为我实现了没有指令的列表。

当我调出带有指令的页面时，控制台会发出错误：未定义用户，指向我的指令中带有模板的行：'<tr ng-repeat="user in '+users+'" ng-click="selectUser(user, $event)">'+

如何在那里获取我的用户资源？

Answer 1

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

删除链接中的scope.selectedUser函数。还要摆脱var users=attrs.userModel;，因为您已经通过隔离范围获得了范围内的用户。
使用您设置的范围调用您的指令：
```
<div user-list data-users="users"></div>
```
（可选）如果您希望更加简洁，请将您的隔离范围更改为scope:{users:'=userList'}然后您可以说：
```
<div user-list="users">
```
从孤立范围内的双向绑定中删除selectedUser，你不需要它...除非你想双向绑定但是这很奇怪而且我不喜欢推荐它。

现在替换

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

与

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

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

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

1 个答案: