모델을 내 지시문에 어떻게 가져 옵니까?

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

나는 당신이 조금 지나치게 생각하고 있다고 생각합니다.

1. 링크에서 scope.selectedUser 기능을 제거하십시오. 또한 고립 된 범위를 통해 범위에있는 사용자가 이미 있기 때문에 var users=attrs.userModel;을 제거하십시오.

2. 당신의 지시어는 당신에게 범위 지정 설정을 사용하여 전화 : 당신이 훨씬 더 간결 scope:{users:'=userList'}로 분리 범위를 변경을하고자 다음 말을 바로 할 수있는 경우

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

3. (선택 사항)를 :

   <div user-list="users"> 
   

4. 당신의 고립 범위에 바인딩 양방향에서 selectedUser을 제거, 당신은 당신이 양방향 양방향으로 원하지 않는 한이 ... 필요하지 않습니다 그러나 그것은 이상 할 것이고 나는 그것을 추천하지 않는다.

5. 지금 이제 양방향 바인딩있어

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

와

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

교체, 그래서 당신은 사용자가이 행에 무엇을 알고있다. 사용자가 선택되었을 때 무언가를하고 싶다면 ng-click="selectUser(user)"과 같은 함수를 호출하고 범위에 함수를 넣을 수 있습니다.