$scope.$watch 使用棱角材料

$scope.$watch with angular-material

本文关键字:材料 scope watch      更新时间:2023-09-26

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

当我单击取消所有工作时,都会返回根网址,但是当我单击页面上的任何位置并且侧导航关闭时,我停留在/new 上。

我是棱角和棱角材料的新手

(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>

您正在观察 vm.sidenavOpen 变量以检测 sidevav 关闭,该关闭仅在您单击取消按钮而不是单击外部时触发。与其使用 vm.sidenavOpen 来检测侧导航关闭,不如尝试这样的事情

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