Pass Einheimischen in mdBottomSheets (Winkelmaterial unteren Blätter)

Question

Ich habe versucht, die Einheimischen in BottomSheet Controller zu übergeben

//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' 
        }, 
       } 
      }); 
     };  
}); 

Aber $ scope.Item ist bevölkern nicht. Was ist die richtige Methode, um Locals in BottomSheet Controller zu übergeben?

Answer 1

Sie haben die Einheimischen in den unteren Blatt Controller zu injizieren - 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=}: Ein Objekt mit Schlüssel/Wert-Paaren. Die Tasten werden als Namen der Werte verwendet, die in den Controller injiziert werden. Für Beispiel würde locals: {three: 3}three in die Steuerung injizieren mit dem Wert des 3.

Answer 2

Als Alternative Sie auch die bindToController Eigenschaft auf true setzen. Dies ermöglicht den Zugriff auf Locals in der BottomSheetCtrl. So in der BottomSheetCtrl können Sie dann den Wert von Artikeln wie diese:

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