从控制器传递数据到指令angularjs

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> 

这是我的控制器和指令。我试图通过控制器将$ scope.users传递给指令：

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