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

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

1 个答案: