1

第一次玩指令。我正在尝试制作一个包含可点击行的列表，它还没有做太多，但我一直在试图弄清楚如何让模型符合指令。

这是指令：

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)">'+

如何在其中获取我的用户资源？

4

1 回答 1

2

我觉得你只是想多了。

  1. 摆脱链接中的 scope.selectedUser 函数。还要摆脱，var users=attrs.userModel;因为您已经通过隔离范围让用户进入范围。

  2. 使用您设置的范围调用您的指令：

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

  3. （可选）如果您想让它更简洁，请将您的隔离范围更改为scope:{users:'=userList'}，然后您可以说：

    <div user-list="users">

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

  5. 现在更换 

    <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)"并将函数放入您的范围内。

于 2013-10-16T20:12:00.803 回答