深入讲解AngularJS中的自定义指令的使用_AngularJS
- 元素指令
- 属性指令
- CSS class 指令
- 注释指令
在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:
元素指令
在html中写下如下的标签,它用来放置代码片段。当我们想使用特定的代码,我们就用上述标签来包含该代码。
...
在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标签中敲入如下属性,这个标签用来盛放代码片段。当我们想使用特定代码片段,我们只要敲下这样的标签来包含该代码。
...
在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。此时,你的文件夹层次结构如下:
第二步
在details.html中剪切review部分,并添加
第三步
将你在details.html页面中剪切的代码拷贝至reviews.html如下所示:
Review Points: {{review.star}}
{{review.body}} ~{{review.name}} on
{{review.createdOn | date:'MM/yy'}} Add reviewReview Points: {{reviewCtrl.review.star}} X
{{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}}
第四步
现在可以在user-reviews标签中添加行为了。让我们打开controller.js,添加如下代码:
GuitarControllers.directive('userReviews', function() { return { restrict : 'E', // used E because of element templateUrl : 'partials/cDirectives/reviews.html' }; });
代码解释:
我们的
我们刚刚自定义了一个指令。尽管看起来我们的应用中没有变化,但是现在我们的代码较之前已经进行了很好的规划。你能为描述和规格自定义指令吗?自己尝试一下吧。
推荐阅读
-
AngularJS创建自定义指令的方法详解
-
浅谈AngularJS中ng-class的使用方法
-
AngularJS自定义服务与fliter的混合使用
-
对angularJs中自定义指令replace的属性详解
-
AngularJs1.x自定义指令独立作用域的函数传入参数方法
-
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
-
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
-
Angularjs使用directive自定义指令实现attribute继承的方法详解
-
AngularJS中的缓存使用
-
详解angularJs中自定义directive的数据交互