欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入讲解AngularJS中的自定义指令的使用

程序员文章站 2022-09-07 10:25:17
angularjs的自定义指令,就是你自己的指令,加上编译器编译dom时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代...

angularjs的自定义指令,就是你自己的指令,加上编译器编译dom时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码。那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来。这样的代码更容易理解。angularjs中有四种类型的自定义指令:

  1.     元素指令
  2.     属性指令
  3.     css class 指令
  4.     注释指令

在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:
 
元素指令

在html中写下如下的标签,它用来放置代码片段。当我们想使用特定的代码,我们就用上述标签来包含该代码。

<guitar-reviews> ... </guitar-reviews>

在js文件中,用以下几行代码来使上述angularjs自定义指令生效。
 

app.directive('guitarreviews', function() {
 return {
  restrict  : 'e', // used e because of element 
  templateurl : 'custom-directives/reviews.html'
 };
});

代码解释:

如同app.controller,我们先定义app.directive,然后定义guitarreview,后者是html中用到的元素标签名。但是你注意到没有,guitar-review 和guitarreviews是不同的?这是因为 guitar-reviews的连字符转换到驼峰式大小写,因而在js文件中就变成了guitarreviews。下一步是正在返回参数的匿名函数。 restrict: ‘e' 是指我们在定义一个自定义元素指令,而 templateurl则指向要包含的代码片段文件。
 
属性指令

在html文件的html标签中敲入如下属性,这个标签用来盛放代码片段。当我们想使用特定代码片段,我们只要敲下这样的标签来包含该代码。
 

<div guitar-reviews> ... </div>

在js文件中,用以下代码来使上述angularjs自定义指令生效。
 

app.directive('guitarreviews', function() {
 return {
  restrict  : 'a', // used a because of attribute 
  templateurl : 'custom-directives/reviews.html'
 };
});

注意: angularjs 推荐你用简单的 css 和普通的注释代替自定义指令中的css和注释.

现在让我们在app中实现自定义指令吧。你可以在这里下载项目文件。我把reviews部分的代码放到单独的文件,再把该代码片段赋给一个元素,最后在details.html页面中使用.
 
第一步

在指定的文件夹下新建一个文件夹命名为cdirectives,用来存放自定义的指令。然后,在该文件夹下创建一个reviews.html文件,用于持有用户的reviews。此时,你的文件夹层次结构如下:

深入讲解AngularJS中的自定义指令的使用

 第二步

在details.html中剪切review部分,并添加<user-reviews></user-reviews>标签如下所示:

深入讲解AngularJS中的自定义指令的使用

 第三步

将你在details.html页面中剪切的代码拷贝至reviews.html如下所示:

<!-- review tab start, it has a new controller -->
<div ng-show="panel.isselected(3)" class="reviewcontainer" ng-controller="reviewcontroller as reviewctrl" >
 
<!-- user reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longdescription ureview" ng-repeat="review in guitarvariable[whichguitar].reviews"> 
  <h3>review points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdon | date:'mm/yy'}} </p>
</div><!-- end user reviews -->
 
<!-- this is showing new review preview-->
<div ng-show="add === 1" class="longdescription ureview" > 
  <h3>review points: {{reviewctrl.review.star}} <span ng-click="add=0">x</span></h3>
  <p> {{reviewctrl.review.body}} ~ {{reviewctrl.review.name}} </p>
</div>
 
<!-- add new review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addreviewlink">add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addreview function with guitarid -->
<form class="reviewform" name="reviewform" ng-submit="reviewform.$valid && reviewctrl.addreview(guitarvariable.indexof(guitarvariable[whichguitar]))" novalidate ng-show="add===1" >
  <div>
    review points: 
    <!-- ng-option here is setting options, cool? -->
    <select ng-model="reviewctrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    email: 
    <input type="email" ng-model="reviewctrl.review.name" required>
    <button type="submit">submit</button>
    </div>
    <textarea placeholder="enter your experience with this guitar..." ng-model="reviewctrl.review.body"></textarea>
</form><!-- end add new review -->
</div><br /><!-- end review tab -->

 
第四步

现在可以在user-reviews标签中添加行为了。让我们打开controller.js,添加如下代码:

guitarcontrollers.directive('userreviews', function() {
 return {
  restrict  : 'e', // used e because of element 
  templateurl : 'partials/cdirectives/reviews.html'
 };
});

 

代码解释:

我们的<user-reviews>指令在这里变成了userreviews(以camel形式表示)并且连字符不见了。下面我们可以说,当它被调用时加载templateurl中的文件并且对元素e限制该指令。

我们刚刚自定义了一个指令。尽管看起来我们的应用中没有变化,但是现在我们的代码较之前已经进行了很好的规划。你能为描述和规格自定义指令吗?自己尝试一下吧。