在 mdBottomSheets（angular material 底页）中传递局部变量

Question

我尝试在 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' 
                   },
                }
            });
        };    
});

但是 $scope.Item 没有填充。在 BottomSheet Controller 中传递局部变量的正确方法是什么？

Answer 1

你必须将本地人注入底部 sheet 控制器 - CodePen

标记

<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.

Answer 2

作为替代方案，您还可以将 bindToController 属性设置为 true。这允许访问 BottomSheetCtrl 中的局部变量。因此，在 BottomSheetCtrl 中，您可以像这样获取 Item 的值：

var Item = this.locals.Item;

JS

//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' },
  ];
  var Item = this.locals.Item;
  $scope.items.append(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),
                bindToController: true,
                locals: {
                   Item:  { 
                    'name': 'Print this page', 'icon': 'print' 
                   },
                }
            });
        };    
});

在 mdBottomSheets（angular material 底页）中传递局部变量

Pass locals in mdBottomSheets(angular material bottom sheets)

angularjs

material-design

angular-material

bottom-sheet