如何让我的模式我的指令？ [英] How do I get my model to my Directive?

问题描述

第一次与指令播放。我试图让一个具有可点击行的列表，它没有做多少还，但我坚持试图找出如何让模型的指令。

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.

下面的指令：

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>

和页面使用此控制器：

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

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

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

当我打开的页面与指令控制台提供了一个错误：用户没有定义，指着我的指令与模板的行：'＆LT; TR NG重复=用户'+用户+'NG点击=selectUser（用户，$事件）＆GT;'+

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?

推荐答案

我觉得你得太多只是它有点。

I think you're just overthinking it a bit.

1. 获取链接摆脱你scope.selectedUser功能。也摆脱 VAR用户= attrs.userModel; ，因为你已经通过您的隔离范围得到了在示波器的用户

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.

使用作用域设置你打电话给你的指令：

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:

<div user-list="users">

删除 selectedUser 从您的隔离范围双向绑定，你不需要它那里...除非你想双向绑定的，但这会是奇怪的，我不建议这样做。

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.

现在替换

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

与

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

现在你已经有了双向绑定，所以你知道用户是此行的内容。如果你想选择的用户在做什么，你仍然可以调用像函数NG点击=selectUser（用户），把一个函数在你的范围内。

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.

这篇关于如何让我的模式我的指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！