Daten vom Controller an die Anweisung angularjs übergeben

Question

Ich versuche, Daten vom Controller an die Direktive zu übergeben, um Zeilen in einer Tabelle dynamisch zu aktualisieren. Die Tabelle wird jedoch nicht aktualisiert, und in der Konsole wird kein Fehler angezeigt.

Das ist mein 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> 

Dies ist mein Controller und Richtlinie. Ich versuche $ scope.users durch Controller-Richtlinie zu übergeben:

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