了解指令–第5部分

by Santhakumar Munuswamy

  Posted on  31 December 2015

  AngularJS

 

这个 article explains understand the 指示s 与 a sample application and its usage of 指示s 讨论区 to here. In my previous article,  we saw 理解 the controller with an sample application. 这是写在上的系列文章， 

什么是指令？

指令是AngularJs的主要功能。它可以在元素名称，属性，注释以及CSS类中使用。           

我们可以使用内置指令，也可以创建自己的指令，例如自定义指令。

指示 Type

我们可以在AngularJs中实现以下类型的指令

  • 元素指令
  • 属性指令
  • CSS类指令
  • 注释指令 

Angular在以下应用立场上提供了两个内置指令

  • 应用程式
  • ng- Controller 

应用程式 指令

ng- apps指令与应用程序的根元素关联。它基本上放置在页面的根元素附近，如body或html标签

ng- Controller指令

ng- controller指令将控制器类与视图关联

Angular提供 几个 内建指令  捆绑  站在下面

  • ng-bind
  • ng模型
  • 热
  • ng-src
  • ng样式  

ng- 绑定  指示 

ng-bind 属性可将特定元素的文本值替换为value，并在更改值后更新其中的值 

怎么样 to use ng-bind for the attribute

<Any   
ng-bind=”expression”>  
</Any>

如何将ng-bind用于CSS类 

<Any class=”ng-bind: expression;”>  </Any>

热 指令

热 指令可评估当前范围内的表达式

如何使用ng-init作为属性 

<Any    
ng-init=”expression”>   
</Any>

如何在CSS类中使用ng-init 

<Any class=”ng-init: expression;”>  </Any>

ng模型 指令

ng模型 指令将输入字段绑定到当前控制器范围内的属性

Angular提供 few 内建指令 operation 站在下面 

  • ng- change
  • ng检查
  • 点击
  • 引用
  • ng- selected

步骤1：

打开Visual Studio 2015并转到文件菜单，指向新的，然后单击新项目。将打开新的ASP.NET项目窗口，您可以选择一个ASP.NET Web应用程序并键入项目名称AngularJsDirectivesDemo，选择项目位置路径，然后单击“确定”按钮。 

新的ASP.NET项目窗口将打开，您可以选择一个 Empty Template with No Authentication 然后单击确定按钮。 

转到解决方案资源管理器，右键单击项目名称，然后单击“管理NuGet程序包”。

NuGet软件包管理器窗口将打开，您可以键入AngularJS并浏览。还要选择AngularJS.Core，然后单击“安装”按钮。

预览窗口将打开，您可以看到AngularJS版本的安装详细信息，然后单击确定按钮。在AngularJS中成功安装后，您可以看到以下内容： 

您可以在下面的屏幕快照中看到AngularJsControllerDemo项目结构。 

添加SimpleDirectives.html

转到解决方案资源管理器，右键单击项目名称，然后指向添加，然后单击HTML页面。您可以键入项目名称SimpleDirectives.html，然后单击“确定”按钮

第2步：  这里的SimpleDirectives.html代码， ng-model，ng-bind和ng-init  

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Controller Application Demo </title>  
  5.     <meta charset= “ utf-8”  />  
  6.     <script src=“脚本/angular.min.js”></script>  
  7. </head>  
  8. <body>  
  9.     <h2>AngularJs Directive Application Demo</h2>    
  10.     <div ng-app= ” >  
  11.         First Name: <input type= “文本”  ng-model=“名字” /><br /><br />  
  12.         Last Name:  <input type= “文本”  ng-model=“姓” /><br /><br />  
  13.         <hr />          
  14.         Welcome {{firstName}} {{lastName}}  
  15.     </div>  
  16. </body>  
  17. </html>

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Controller Application Demo </title>  
  5.     <meta charset= “ utf-8”  />  
  6.     <script src=“脚本/angular.min.js”></script>  
  7. </head>  
  8. <body>  
  9.     <h2>AngularJs Directive “ ng-init” Application Demo</h2>  
  10.     <div ng-app= ”  ng-init=“名字='Vishanth'”>  
  11.         First Name: <input type= “文本”  ng-model=“名字” /><br /><br />  
  12.         Last Name:  <input type= “文本”  ng-model=“姓” /><br /><br />  
  13.         <hr />  
  14.         Welcome <span ng-bind=“名字” ></span> {{lastName}} </div>  
  15. </body>  
  16. </html> 

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Student Mark Sheet Demo </title>  
  5.     <meta charset= “ utf-8”  />  
  6.     <script src=“脚本/angular.min.js”></script>  
  7. </head>  
  8. <body>  
  9.     <center>  
  10.         <h2>Student Mark Sheet</h2>  
  11.         <table ng-app= ”  width= “ 500px”  cellpadding="3" cellspacing="6" border="1">  
  12.             <tr>  
  13.                 <td>Tamil:</td><td> <input type= “数”  ng-model= “泰米尔语”  /><br /></td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <td>English:</td>  
  17.                 <td> <input type= “数”  ng-model="英语" /><br /></td>  
  18.             </tr>  
  19.             <tr>  
  20.                 <td>Maths: </td>  
  21.                 <td><input type= “数”  ng-model="数学" /><br /></td>  
  22.             </tr>  
  23.             <tr>  
  24.                 <td>Science: </td>  
  25.                 <td><input type= “数”  ng-model="科学" /><br /></td>  
  26.             </tr>  
  27.             <tr>  
  28.                 <td>Social Science</td>  
  29.                 <td> <input type= “数”  ng-model="社会科学" /><br /></td>  
  30.             </tr>  
  31.             <tr>  
  32.                 <td><strong>Total Marks</strong></td>  
  33.                 <td> {{tamil + english + maths + science + socialscience }}</td>  
  34.             </tr>  
  35.               
  36.         </table>  
  37.     </center>  
  38. </body>  
  39. </html>


步骤3：   控制器应用程序演示输出如下 屏幕截图， 

结论：

这个 article helps you to understand 的 Directives 与 a 使用Visual Studio 2015的示例应用程序。感谢您阅读我的文章。请分享您的意见或建议

 

分享：

关于作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师，并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计，软件产品开发，技术文档，Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域（汽车，电信，医疗保健，物流和仓库自动化等）的IT行业经验丰富，担任过技术架构师，Genesys顾问，技术负责人，团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我： 脸书 , 推特 , 谷歌加, 领英
博客评论由 领英


社区徽章