Question

我无法访问$scope中的父{ä$mdBottomSheet。我想能够创建这个底部工作表并单击其中一个显示父$scope数据的按钮。我做了codepen。

这就是代码：

<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">

  <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center">

    <md-button flex="50" class="md-primary md-raised" ng-click="showGridBottomSheet()">Show as Grid</md-button>
  </div>

  <div ng-if="alert">
    <br>
    <b layout="row" layout-align="center center" class="md-padding">
      {{alert}}
    </b>
  </div>
<script type="text/ng-template" id="bottom-sheet-grid-template.html"><md-bottom-sheet class="md-grid" layout="column" ng-cloak>
  <div>
    <md-list flex layout="row" layout-align="center center">
      <md-list-item ng-repeat="item in items">
        <div>
        <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
          <md-icon md-svg-src="{{item.icon}}"></md-icon>
          <div class="md-grid-text"> {{ item.name }} </div>
        </md-button>
        </div>
      </md-list-item>
    </md-list>
  </div>
</md-bottom-sheet>
</script>

</div>

JavaScript的：

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(function($mdIconProvider) {
    $mdIconProvider
      .icon('share-arrow', 'img/icons/share-arrow.svg', 24)
      .icon('upload', 'img/icons/upload.svg', 24)
      .icon('copy', 'img/icons/copy.svg', 24)
      .icon('print', 'img/icons/print.svg', 24)
      .icon('hangout', 'img/icons/hangout.svg', 24)
      .icon('mail', 'img/icons/mail.svg', 24)
      .icon('message', 'img/icons/message.svg', 24)
      .icon('copy2', 'img/icons/copy2.svg', 24)
      .icon('facebook', 'img/icons/facebook.svg', 24)
      .icon('twitter', 'img/icons/twitter.svg', 24);
  })
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
  $scope.alert = '';
  $scope.items = [
    { name: 'Hangout', icon: 'hangout' },
    { name: 'Mail', icon: 'mail' },
    { name: 'Message', icon: 'message' },
    { name: 'Copy', icon: 'copy2' },
    { name: 'Facebook', icon: 'facebook' },
    { name: 'Twitter', icon: 'twitter' },
  ];

  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
  $scope.showGridBottomSheet = function() {
    $scope.alert = '';
    $mdBottomSheet.show({
      templateUrl: 'bottom-sheet-grid-template.html',
      controller: function () {
                      return this;
      },
      preserveScope: true,
      bindToController: true,
      clickOutsideToClose: true
    }).then(function(clickedItem) {
      $mdToast.show(
            $mdToast.simple()
              .textContent(clickedItem['name'] + ' clicked!')
              .position('top right')
              .hideDelay(1500)
          );
    });
  };
})
.run(function($http, $templateCache) {

    var urls = [
      'img/icons/share-arrow.svg',
      'img/icons/upload.svg',
      'img/icons/copy.svg',
      'img/icons/print.svg',
      'img/icons/hangout.svg',
      'img/icons/mail.svg',
      'img/icons/message.svg',
      'img/icons/copy2.svg',
      'img/icons/facebook.svg',
      'img/icons/twitter.svg'
    ];

    angular.forEach(urls, function(url) {
      $http.get(url, {cache: $templateCache});
    });

  });

我看不到表格内的按钮/图标。

小提琴：https://jsfiddle.net/uvkr9zwe/

Answer 1

您需要通过实例化和引用父控制器范围以正确的方式解析父控制器范围。

选中 demo fiddle ：

您的范围操作：

.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {

  $scope.alert = '';

  $scope.items = [
    { name: 'Hangout', icon: 'hangout' },
    { name: 'Mail', icon: 'mail' },
    { name: 'Message', icon: 'message' },
    { name: 'Copy', icon: 'copy2' },
    { name: 'Facebook', icon: 'facebook' },
    { name: 'Twitter', icon: 'twitter' },
  ];

  $scope.showGridBottomSheet = function() {
      $mdBottomSheet.show({
        templateUrl: 'bottom-sheet-grid-template',
        controller: function () {
           this.parent = $scope;
        },
        controllerAs: 'ctrl',
        clickOutsideToClose: true
      }).then(function(clickedItem) {
        $mdToast.show(
              $mdToast.simple()
                .textContent(clickedItem['name'] + ' clicked!')
                .position('top right')
                .hideDelay(1500)
            );
      });
    };
})

查看模板：

<script type="text/ng-template" id="bottom-sheet-grid-template">
  <md-bottom-sheet class="md-grid" layout="column" ng-cloak>
  <div>
    <md-list flex layout="row" layout-align="center center">
      <md-list-item ng-repeat="item in ctrl.parent.items">
        <div>
        <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
          <md-icon md-svg-src="{{item.icon}}"></md-icon>
          <div class="md-grid-text"> {{ item.name }} </div>
        </md-button>
        </div>
      </md-list-item>
    </md-list>
  </div>
</md-bottom-sheet>
</script>

无法访问$ mdBottomSheet中的父$ scope

1 个答案: