1

我试图在 BottomSheet 控制器中传递本地人

//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 控制器中传递本地人的正确方法是什么？

4

2 回答 2

4

您必须将本地人注入底部工作表控制器 - 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;
});

底页参考

locals- {string=}：包含键/值对的对象。键将用作注入控制器的值的名称。例如，locals: {three: 3}将注入three值为 3 的控制器。

于 2016-08-02T12:06:14.173 回答
0

作为替代方案，您还可以将 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' 
                   },
                }
            });
        };    
});
于 2018-01-05T08:48:43.300 回答