我正在尝试将数据从控制器传递到指令,以动态更新表中的行。但是表没有得到更新,并且控制台中没有显示错误。
这是我的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);
}
}
});
答案 0 :(得分:0)
.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);
}
}
});