$scope.$watch 使用棱角材料
$scope.$watch with angular-material
想要在有人关闭表单(在侧导航中)时更改路由(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;
})
相关文章:
- AngularJS:ng之后,重复$scope值未按预期更新
- $ionicplatform内的$scope不;不起作用
- JavaScript的额外材料:理解奇怪的部分
- 使用$scope方法时的ControllerAs语法
- 如何将ngrepeat下的ngmodel绑定到$scope
- 另一个if(!$scope.$$phase)$scope$apply()szenario-需要帮助才能通关
- 无法读取属性'材料'未定义的Three.js
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- $scope变量被视为字符串AngularJs
- ng在更新$scope后重复不更新信息
- 将固定片放置在有角度的材料中
- 正在获取Angular以检测$scope中的更改
- 如何惯用地手动销毁scope&在AngularJS中重新创建
- Understanding Javascript scope with "var that = this&qu
- AngularJS,angular.element($0).scope()揭示了每个控制器的函数
- Ng出口无法访问父$scope
- ng选项-用vm替换$scope
- $scope变量,ng隐藏/显示
- 强制 $scope.$watch 只开火一次
- $scope.$watch 使用棱角材料