angularjs学习心得

1.在使用Angular Material对话框时，对话框显示以后，点击浏览器的返回按钮对话框不会消失的问题，解决方法就是监听$stateChangeStart事件，如果对话框已经显示则取消对话框并阻止下一步事件，如果有panel对话框需要先关闭掉panel对话框，自己在$mdPanel的Controller中绑定panelClose事件，$scope.on('panelClose',function(){mdPanelRef.close();})

.run(['$rootScope', '$state', '$stateParams', 'SessionStorage', 'ENV', '$mdDialog', '$document',
        function ($rootScope, $state, $stateParams, SessionStorage, ENV, $mdDialog, $document) {
            //监听stateChange事件
            $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
                if(angular.element($document[0].body).hasClass('md-dialog-is-showing')) {//如果有对话框存在
                    $mdDialog.cancel();
                    event.preventDefault();
                    return;
                }
                if(angular.element('.md-panel-is-showing').length>0) {//如果有Panel对话框存在
                    $rootScope.$broadcast('panelClose');
                    event.preventDefault();
                    return;
                }
            });
        }
    ]);

需要注意的是在dialog和panel对话框关闭时，如果要跳转页面，不应该写成$mdDialog.cancel();$tate.go()//跳转页面和mdPanelRef.close();$tate.go()//跳转页面，因为对话框关闭会有延迟，应该利用promise

正确写法为$mdDialog.cancel().then(function(){$state.go();});和mdPanelRef.close().then(function(){$state.go();});

2.ng-change不允许传递$event参数

3.双向绑定的数据使用对象，如$scope.data=Object，ng-model='data.name',如果直接使用$scope.name和ng-model='name'有可能出现双向绑定失败

4.谷歌浏览器安装插件AngularJS Inspector可以在控制台中打印$scope对象，在插件Tab页可以看到整个网页的scope分布

5.可以获取元素调用controller()函数来获取到控制器，比如我表单name叫做personInfo，在控制台angular.element('[name=personInfo]').controller()可以把我这个个人信息编辑的控制器打印出来，包括里面的对象、函数、变量

6.Angular Material的多行文本框字数校验，在点击重置按钮手动的修改文本框的值以后，文字长度统计并不会修改，所以自定义了一个指令

.directive('textChange', ['$timeout',function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            scope.$on('textChanged', function () {
                $timeout(function () {
                    elem.triggerHandler('input');
                });
            });//可以通过$scope.$broadcast('textChanged');来触发textChanged事件
            scope.$watch(attrs.ngModel, function () {
                $timeout(function () {
                    elem.triggerHandler('input');
                });
            });
        }
    }
}]);

在文本框中增加text-change属性， <textarea text-change/>即可实现重置按钮点击以后修改，实际上建议在点击重置按钮以后手动的发送广播textChanged，因为通过$watch监听变化在首次加载页面的时候就会有form.$dirty问题