ajeet lakhani ajeet lakhani - 3 months ago 39
AngularJS Question

Pass locals in mdBottomSheets(angular material bottom sheets)

I have tried to pass locals in BottomSheet Controller

//Bottom Sheet Controller
angular
.module('app').controller('BottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share-arrow' },
{ name: 'Upload', icon: 'upload' },
{ name: 'Copy', icon: 'copy' },

];
$scope.items.append($scope.Item);
console.log($scope.items);
});


//AppCtrl
angular
.module('app').controller('AppCtrl', function($scope, $mdBottomSheet){

$scope.openBottomSheet = function() {
$mdBottomSheet.show({
template:
'<md-bottom-sheet>{{}}</md-bottom-sheet>',
controller: 'BottomSheetCtrl',
scope: $scope.$new(true),
// preserveScope: true,
locals: {
Item: {
'name': 'Print this page', 'icon': 'print'
},
}
});
};
});


But $scope.Item is not populating. What is the correct way of passing locals in BottomSheet Controller?

Answer

You have to inject the locals into the bottom sheet controller - CodePen

Markup

<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
    <md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show as List</md-button>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
  $scope.showListBottomSheet = function() {
    $scope.alert = '';
    $mdBottomSheet.show({
      template: '<md-bottom-sheet ng-cloak>{{Item.name}}</md-bottom-sheet>',
      controller: 'ListBottomSheetCtrl',
      locals: {
        Item:  { 
          'name': 'Print this page', 'icon': 'print' 
        },
      }
    }).then(function(clickedItem) {
      $scope.alert = clickedItem['name'] + ' clicked!';
    });
  };
})

.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet, Item) {
  console.log(Item);
  $scope.Item = Item;
});

Bottom sheet reference

locals - {string=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} would inject three into the controller with the value of 3.

Comments