Angular Bootstrap uibModal无法解析属性

Question

Roles property not resolve in AngularJS bootstrap uiModel.

var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: 100,
  resolve: {
    roles: function () {
         return $scope.roles;
    }
  }
});

See ngRepeat code which read the value of Roles and making dom elements.

  <ul> <li ng-repeat="item in roles"> <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item.name }}</a> </li> </ul> 

Also error shows on console : Error: [$injector:unpr] Unknown provider: itemsProvider <- items <- ModalInstanceCtrl

Answer 1

After some sort of research I found that Angular only resolve items property in uiModel, so when user want to get values from other attributes then angular not respond properly.

Find the updated code

 var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: 100, resolve: { items: function () { return $scope.userInfo; } } }); 

  <ul> <li ng-repeat="item in items.role"> <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item.name }}</a> </li> </ul> 

Explaination : $scope.userInfo is the JSON object which contains the role key and role contains the list of role