Question

很抱歉这个冗长的问题。我用角度材料创建了一个md-bottomsheet。 https://material.angularjs.org/latest/demo/bottomSheet。此按钮触发底部表格。

html文件1：

<md-button ng-click="openBottomSheet()"></md-button>

这是我触发的功能

JS - 控制器1

$scope.openBottomSheet = function () {

    $mdBottomSheet.show({
        templateUrl: 'components/map/services.html',
        disableBackdrop: true,
        controller: 'serviceController',
        clickOutsideToClose: true,
    });
};

在我的底页中，我创建了触发功能的开关按钮https://material.angularjs.org/latest/demo/switch。我有另一个关闭底部表格的功能。

<md-bottom-sheet class="md-list servicebottomsheet" layout-align="center center" class="mapoptionwrap" ng-cloak>
<div class="tester">
    <div layout="row" layout-align="end center">
        <button ng-click="closeBottomSheet()">
            <i class="material-icons closeservice">clear</i>
        </button>
    </div>

    <div layout="row" layout-align="space-between center" ng-repeat="option in mapoptions" class="scrolltest">

        <div layout="row" layout-align="start center">


            <p class="servicetexts">{{option.title | translate}}</p>
        </div>
        <md-switch class="md-primary" ng-model="testing" aria-label="Switch 1" ng-click="switchFilter(option)">
        </md-switch>


    </div>
</div>

这些是被触发的功能

controller nr 2

app.controller("serviceController", ['$scope', 'mapFilters', '$mdBottomSheet', function ($scope, mapFilters, $mdBottomSheet) {
$scope.mapoptions = mapFilters.getMapFilters();
$scope.switchFilter = function (mapoption) {
    mapFilters.filter[mapoption.type] = !mapFilters.filter[mapoption.type];
    console.log(mapFilters.filter);
}

$scope.closeBottomSheet = function () {
    $mdBottomSheet.hide({
        preserveScope: true,
    });

}
}])

当我按下开关时，我触发switchfilter函数，该函数将变量从false设置为true。它工作得很好，完全符合它的要求。然而，当我关闭底片，然后重新打开它时，开关似乎已经清空，所有都设置为假，尽管我用开关改变的booleen仍设置为true。为什么是这样？它是否与我的示波器有关，因为我使用不同的控制器？

Answer 1

是的，确实如此。如果你没有在你的配置中指定一个范围，那么每次你打开底图时都会创建一个范围，并在你关闭它时将其销毁。

您可以像这样制作底片：

$scope.openBottomSheet = function () {
    $mdBottomSheet.show({
        templateUrl: 'components/map/services.html',
        disableBackdrop: true,
        controller: 'serviceController',
        clickOutsideToClose: true,
        scope: $scope,
        preserveScope: true
    });
};

执行此操作，您将传入父范围（您可以传递任何范围），并且使用preserveScope: true，一旦关闭底部图像，它就不会破坏范围。

范围和角度材料

1 个答案: