javascript - $scope.$watch 带有 Angular Material

Question

当有人关闭表单(在侧导航中)时想要更改路线(ui.router)。

当我单击“取消所有工作”时，会返回根 URL，但当我单击页面上的任意位置并且 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 关闭

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>

Controller

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