<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1" ng-init="header='https://www.jb51.net/header.html'"> <ng-include src="https://www.jb51.net/article/header"></ng-include> <ng-include src="'https://www.jb51.net/header.html'"></ng-include> <script type="text/ng-template"> 您想购买的商品是:{{product}} </script> <ng-include src="'https://www.jb51.net/template1'"></ng-include> <ng-include src="'https://www.jb51.net/template1'"></ng-include> <div ng-include="'footer.html'"></div> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); function regTest() { var reg1=new RegExp("\d","igm"); var reg2=https://www.jb51.net/\d/igm; var str="This is some bad,dark evil text"; str=str.replace(/bad|dark|evil/igm,"Happy"); console.log(str); //取出Hello Hello var str="<input value='Hello'/><input value='World'/>"; //将value中的内容前后增加一个* } regTest(); </script> </body> </html>
运行结果：
上面的结果都是“TF卡”的原因是因为模板是先包含再解析的，后定义的变量覆盖前面定义的，并不是一边包含一边渲染的。
3.1.4、不绑定（ngNonBindable）
ngNonBindable指令告诉Angular编译或绑定当前DOM元素的内容。这对于要求Angular忽略那些元素中包含Angular指令和绑定的情况下很有用。这种情况能让你的网站实时显示源码。
<div>Normal: {{1 + 2}}</div><div ng-non-bindable>Ignored: {{1 + 2}}</div>
脚本：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1" ng-init="header='https://www.jb51.net/header.html'"> <p> 被解析的表达式：1+2={{1+2}} </p> <p ng-non-bindable="true"> 不解析的表达式：1+2={{1+2}} </p> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); </script> </body> </html>
结果：
3.2、扩展表单元素的指令
3.2.1、ng-options
该指令允许你基于一个迭代表达式添加选项
<select ng-model="color" ng-options="c.name for c in colors"> <option>--请选择--</option> </select>
ng-model必须要指定，默认情况下被选择的值就是当前对象，没有value的项将被清除。
示例代码：