angularjs指令

Posted 2021-04-26 一度校园动态

AngularJS指令用于扩展html。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令： ·        ng-app - 该指令启动一个AngularJS应用。 ·        ng-init - 该指令初始化应用程序数据。 ·        ng-model - 此指令定义的模型，该模型是变量在AngularJS使用。 ·        ng-repeat - 该指令将重复集合中的每个项目的HTML元素。 ng-app指令 ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。 <div ng-app="" >  加了ng-app则意味着在此div中可以应用angularjs的各种应用 </div>                                                                                 ng-init 指令 ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。 <div ng-app=""ng-init="coutries=[{local:'中国'},{local:'日本'}]"> 初始化了一个数组对象,数据格式为json的数据格式 </div> ng-model指令 ng-model指令定义在AngularJS应用中使用的模型/变量 ng-model 指令也可以： ·        为应用程序数据提供类型验证（number、email、required）。 ·        为应用程序数据提供状态（invalid、dirty、touched、error）。 ·        为 HTML 元素提供 CSS 类。 ·        绑定 HTML 元素到 HTML 表单。 <div ng-app="">   <input type="text" ng-model="name"/>{{name}} 此处定义了一个angularjs的变量，变量名为name，后面的{{name}}则是将变量name取出显示 </div> ng-repeat 指令 ng-repeat 指令重复html元素集合中的每个项目。 <div ng-app=""ng-init="coutries=[{local:'中国'},{local:'日本'}]">  <ol>      <li ng-repeat="country in coutries">         {{country.local}}      </li>   </ol>    此处类似于迭代循环，其中country为数组coutries中的元素    </div> 创建自定义的指令 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTML 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令， studentName,但在使用它时需要以 - 分割, student-name: <div ng-app="myApp">  <divclass="student-name"></div> </div> <script>  varmyApp=angular.module("myApp",[]);  myApp.directive("studentName",function(){            return {template:"<h1>测试</h1>",restrict:"C"};           }); </script> restrict 值可以是以下几种: ·        E 作为元素名使用 ·        A 作为属性使用 ·        C 作为类名使用 ·        M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。