angular 的進一步深刻理解

時間 2019-11-13

原文原文鏈接

早上同事問我個問題，angular 的表單驗證有沒有啥第三方庫能夠用？html

這個問題，我想了下，以前我作的表單驗證好像也沒用到第三方的庫來驗證，直接用angular 內置的 directive 就能夠搞定了。ng-minlength, ng-pattern ,ng-maxlength .. xxForm.$invalid 就能夠了。html5

由於這個東西我之前用了不少，今天他這麼一問，我才發現，有些問題，我還沒真正深刻去理解。因而順便多瞭解了一些。：）多交流node

---------------------------------------------------------------------angularjs

表單驗證是angularJS一項重要的功能，能保證咱們的web應用不會被惡意或錯誤的輸入破壞。Angular表單驗證提供了不少表單驗證指令，而且能將html5表單驗證功能同他本身的驗證指令結合起來使用，進而在客戶端驗證時提供表單狀態的實時反饋。web

要使用表單驗證，首先保證表單有一個name屬性，通常的輸入字段如最大，最小長度等，這些功能由html5表單屬性提供，若是咱們想屏蔽瀏覽器對錶單的默認驗證行爲，能夠在表單元素上添加novalidate標記chrome

參考： http://www.javashuo.com/article/p-nwotxohc-gp.html瀏覽器

<html ng-app="App">
    <head>
        <script src="./js/angular.js"></script>
        <script>
            var app = angular.module('App', []);
            app.controller('appCtrl', function ($scope) {
                $scope.username = "fly";
                
            })
        </script>
    </head>
    <body ng-controller="appCtrl">
        <form name="userForm" novalidate>
            <input type="text" ng-minlength="6" required ng-model="username">
            <input type="submit" ng-disabled="userForm.$invalid" name="ok">
        </form>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------app

順便多瞭解了一下，在dev tools 的console 中查看angular application 的方法：ide

How do I access the $scope variable in browser's console using AngularJS?

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?ui

I can neither see $scope nor the name of my module myapp in the console as variables.

For debugging I usually set window.MY_SCOPE = $scope; first thing in my controller function.

If you're considering development/testing in Firefox, you can also use AngScope, a small extension that displays $scope objects of selected DOM elements into Firebug's DOM Inspector. – Kos Prov

-------------------------------------------------------------------------------------------------------------------------------------

Pick an element in the HTML panel of the developer tools and type this in the console:

angular.element($0).scope()

In WebKit and Firefox, $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console.

You can also target the scope by element ID, like so:

angular.element(document.getElementById('yourElementId')).scope()

Addons/Extensions

There are some very useful Chrome extensions that you might want to check out:

Batarang. This has been around for a while.
ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.

Playing with jsFiddle

When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the URL. When running like this you have access to the angular global. You can try it here:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

If you load jQuery before AngularJS, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with

angular.element('[ng-controller=ctrl]').scope()

Of a button

 angular.element('button:eq(1)').scope()

... and so on.

You might actually want to use a global function to make it easier:

window.SC = function(selector){ return angular.element(selector).scope(); };

Now you could do this

SC('button:eq(10)') SC('button:eq(10)').row // -> value of scope.row

Check here: http://jsfiddle.net/jaimem/DvRaR/1/show/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。