Question

当有人关闭表格时（在侧边），想要更改路线（ui.router）。

当我点击取消时，所有工作都会返回根网址，但是当我点击页面上的任意位置并且sideNav关闭时，我会留在/ new。

我是Angular和Angular-Material的新手

(function () {

"use strict";

angular
        .module("ngClassifieds")
        .controller('newClassifiedsCtrl', function ($mdSidenav, $state , $mdDialog, classifiedsFactory, $timeout, $scope){

            var vm = this;
            vm.closeSidebar = closeSidebar;

            $timeout(function(){
                $mdSidenav('left').open();
            });

            $scope.$watch('vm.sidenavOpen', function(sidenav){
                if(sidenav === false){
                    $mdSidenav('left')
                            .close()
                            .then(function(){
                                $state.go('classifieds');
                            });
                }
            });

            function closeSidebar() {
                vm.sidenavOpen = false;
            }
})
})();

并在模板中

<md-sidenav class="md-sidenav-left md-whiteframe-z2"
        md-component-id="left"
        md-is-open="vm.sidenavOpen">
<md-toolbar>
    <h1 class="md-toolbar-tools">Add a Classified</h1>
</md-toolbar>
<md-content layout-padding>
    <form>
        <md-input-container>
            <label for="title">Title</label>
            <input type="text"
                   id="title"
                   md-auto-focus
                   ng-model="classified.title">
        </md-input-container>
        <md-input-container>
            <label for="price">Price</label>
            <input type="text"
                   id="price"
                   ng-model="classified.price">
        </md-input-container>
        <md-input-container>
            <label for="description">Description</label>
        <textarea id="description"
                  ng-model="classified.description"></textarea>
        </md-input-container>
        <md-input-container>
            <label for="image">Image Link</label>
            <input type="text"
                   id="image"
                   ng-model="classified.image">
        </md-input-container>
        <md-button class="md-primary"
                   ng-click="vm.saveClassified(classified)"
                   ng-if="!editing">
            Save
        </md-button>
        <md-button ng-if="editing"
                   class="md-primary"
                   ng-click="vm.saveEdit()">
            Save Edit
        </md-button>
        <md-button class="md-warn" ng-click="vm.closeSidebar()">
            Cancel
        </md-button>

        <pre>{{ classified | json }}</pre>
    </form>
</md-content>

Answer 1

您正在观看vm.sidenavOpen变量以检测sidevav close，仅当您单击取消按钮而不是单击外部时才触发。而不是使用vm.sidenavOpen来检测sidenav close，你可以尝试类似这样的东西

<强> HTML

<md-sidenav id="sideNav" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-open="vm.sidenavOpen"> //  add id='sideNav'
    .
    .
    .
</md-sidenav>

<强>控制器

var firstTime = true;    // to ignore sidenav closed state on page load
$scope.$watch(function(){
    return (!(document.getElementById('sideNav').getAttribute('class').indexOf('md-closed-remove') != -1) && (document.getElementById('sideNav').getAttribute('class').indexOf('md-closed') != -1))
}, function(value) {
    if(value && !firstTime) {
        $state.go('/classifieds')   // happens every time sidenav goes to closed state (even on click outside)
    } else
        firstTime = false;
})

$ scope。$ watch with angular-material

1 个答案: