コントローラからディレクティブanglejsにデータを渡す

Question

テーブルの行を動的に更新するためにコントローラからディレクティブへデータを渡そうとしています。テーブルは更新されず、コンソールにエラーは表示されません。

これは私のhtmlです：

$<div ng-app="roleManagement" ng-controller="RoleManagementCtrl"> 
<h1> Role Management</h1><hr/> 
<div class="container-fluid"> 
    <form > 
     <div class="form-group row"> 
     <button type="button" class="btn btn-primary col-md-1" 
     ng-click="query(roleId, userId)">Query</button> 
     <button type="button" class="btn btn-primary col-md-2 col-md-offset-    
     1">Edit Role</button> 
</div> 

<div class="form-group row"> 
    <label class="col-md-1" >Role ID</label> 
    <select class="col-md-2 col-md-offset-1" ng-model="roleId"> 
    <option></option> 
    <option ng-repeat="roleID in roleIDS | unique :roleID">{{roleID}}</option> 
    </select> 
</div> 

<div class="form-group row"> 
    <label class="col-md-1">User ID</label> 
    <select class="col-md-2 col-md-offset-1" ng-model="userId"> 
     <option></option> 
     <option ng-repeat="userID in userIDS | unique :userID">{{userID}}   
     </option> 
    </select> 
</div> 
</form> 
</div> 
<hr/> 


<div ng-controller="RoleManagementCtrl"> 
    <my-table users = 'users'></my-table> 
</div> 
</div> 

は、これは私のコントローラとディレクティブです。

$'use strict'; 
angular.module('roleManagement', ['angularUtils.directives.dirPagination']) 
    .controller('RoleManagementCtrl', ['$scope', '$http', 'localStorageService',  
    function($scope, $http, localStorageService) { 
    var init = function() { 
     $http({ 
     method: 'GET', 
     url: 'http://172.16.0.26:7001/Taisys_Server_Current/getAllRoles', 
     headers: {'X-Auth-Token': localStorageService.get('jwtTokens')} 
     }).success(function (response) { 
     $scope.roleIDS = response; 
     }); 
     $http({ 
     method: 'GET', 
     url: 'http://172.16.0.26:7001/Taisys_Server_Current/getAllUsers', 
     headers: {'X-Auth-Token': localStorageService.get('jwtTokens')} 
     }).success(function (response) { 
     $scope.userIDS = response; 
     }); 
     }; 
     init(); 
     $scope.query = function (roleId, userId) { 
     $scope.url =  
     'http://172.16.0.26:7001/Taisys_Server_Current/getRoleData?'; 
     if (roleId == undefined) { 
      $scope.url += 'roleID='; 
      } 
     else { 
      $scope.url += 'roleID=' + roleId; 
      } 
     if (userId == undefined) { 
      $scope.url += '&userID='; 
     } 
     else { 
      $scope.url += '&userID=' + userId; 
     } 
     $http({ 
     method: 'GET', 
     url: $scope.url , 
     headers: {'X-Auth-Token': localStorageService.get('jwtTokens')} 
     }).success(function (response) { 
     $scope.users = response; 
     }) 
     }; 
    }]).directive('myTable', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
     var html = '<table>'; 
     html += '<th>Role Name</th>'; 
     html += '<th>Role ID</th>'; 
     html += '<th>User Name</th>'; 
     html += '<th>User ID</th>'; 
     angular.forEach(scope[attrs.users], function (user, index) { 
      if ('users' in user) { 
       angular.forEach(user.users, function (use, index) { 
       html +='<tr>'; 
       html += '<td>' + user.roleName + '</td>'; 
       html += '<td>' + user.roleID + '</td>'; 
       html += '<td>' + use.userName + '</td>'; 
       html += '<td>' + use.userID + '</td>'; 
       html +='</tr>' 
       }) 
      } 
      } 
    ); 
     html += '</table>'; 
     element.replaceWith(html); 
    } 
    } 
}); 

Answer 1

.directive('myTable', function() { 
    return { 
     restrict: 'E', 
     scope:{users:'=users'} 
     link: function (scope, element, attrs) { 
     var html = '<table>'; 
     html += '<th>Role Name</th>'; 
     html += '<th>Role ID</th>'; 
     html += '<th>User Name</th>'; 
     html += '<th>User ID</th>'; 
     angular.forEach(users, function (user, index) { 
      if ('users' in user) { 
       angular.forEach(user.users, function (use, index) { 
       html +='<tr>'; 
       html += '<td>' + user.roleName + '</td>'; 
       html += '<td>' + user.roleID + '</td>'; 
       html += '<td>' + use.userName + '</td>'; 
       html += '<td>' + use.userID + '</td>'; 
       html +='</tr>' 
       }) 
      } 
      } 
    ); 
     html += '</table>'; 
     element.replaceWith(html); 
    } 
    } 
}); 

：私はディレクティブにコントローラを介して$ scope.usersに合格しようとしています