habitants Pass au mdBottomSheets (feuilles de fond de matériau angulaire)

Question

J'ai essayé de transmettre dans les locaux 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' 
        }, 
       } 
      }); 
     };  
}); 

Mais scope.Item $ ne sont pas peuplant. Quelle est la manière correcte de passer des locaux dans BottomSheet Controller?

Answer 1

Vous devez injecter la population locale dans le contrôleur de feuille inférieure - 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=}: un objet contenant des paires clé/valeur. Les touches seront utilisées comme noms de valeurs à injecter dans le contrôleur. Pour exemple, locals: {three: 3} injecterait three dans le contrôleur avec la valeur de 3.

Answer 2

Comme alternative, vous pouvez également définir la propriété bindToController true. Cela permet d'accéder aux sections locales dans BottomSheetCtrl. Ainsi, dans le BottomSheetCtrl vous pouvez alors obtenir la valeur de l'article comme celui-ci:

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