angularjs常用指令.docVIP

内置指令 所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。首先从一些常见的内置指令开始。先列出一些关键的内置指令，顺便简单说说作用域的问题。 ng-model 将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。但先不要管咬文嚼字，用起来倒是易懂，例如: 复制代码代码如下: input type=text ng-model=someModel.someProperty /br{{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域。这个指令一般会出现在比较小的应用中，比如给个demo什么的... 复制代码代码如下: div ng-init=job=fighter??? Im a/an {{job}}/div 除了ng-init，我们还有更多更好的选择。 ng-app 每一次用AngularJS都离不开这个指令，顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在html你懂的。也就是说根下的作用域都可以访问它。但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。下面是一个例子: 复制代码代码如下: html ng-app=myAppbody??? {{ someProperty }}/bodyscriptvar myApp = angular.module(myApp, []).run(function($rootScope) {??? $rootScope.someProperty = hello computer;});?/script/html ng-controller 我们用这个指令在一个DOM元素上装上controller。一个控制器? 确实，从字面意思上这样理解倒是不错，那我们为什么需要控制器?记得AngularJS 1.2.x时还可以这样定义controller来着... 复制代码代码如下: function ohMyController($scope) {??? //...} AngularJS 1.3.x中禁止了这种方式，因为这种方式会让controller满天飞，分不清层次，所有东西都挂在$rootScope上...?ng-controller必须有一个表达式作为参数，另外通过$scope来继承上级$scope的方法和属性什么的，$rootScope也包括在内。下面只是一个简单的例子，ancestor无法访问child的作用域。 复制代码代码如下: div ng-controller=AncestorController??? {{ ancestorName }}??? {{ childName }}??? div ng-controller=ChildController??????? {{ ancestorName }}??????? {{ childName }}??? /div/divscriptvar myApp = angular.module(myApp, []).controller(ChildController, function($scope) {??? $scope.childName = child;}).controller(AncestorController, function($scope) {??? $scope.ancestorName = ancestor;});/script 作用域的问题远不止如此，暂且搁下，继续看看其他内置指令。 ng-form 起初不明白为什么会有个表单指令，form标签感觉也够用啊。以表单验证为例，在上一篇中有这么一段代码: 复制代码代码如下: input type=submit ng-disabled=mainForm.$invalid / 也就是表单的状态为$invalid时禁用提交按钮。如果场景再稍微复杂一点点，比如一个父表单中有多个子表单，子表单中有3个验证通过时父表单便可以提交。但是，form是不可以嵌套的。考虑到这种场景，我们便使用ng-form指令来解决这一问题。例如: 复制代码代码如下: form name=mainForm novalidate??? div ng-form=form1??????? 姓名:input type=text ng-required=true ng-model=name/br??????? 证件号码:input type=number ng-minLength=15 ng-maxLength=18