AngularJs directive详解及示例代码

前端之家收集整理的这篇文章主要介绍了AngularJs directive详解及示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Directive是教HTML玩一些新把戏的途径。在DOM编译期间,directives匹配HTML并执行。这允许directive注册行为或者转换DOM结构。

  Angular自带一组内置的directive,对于建立Web App有很大帮助。继续扩展的话,可以在HTML定义领域特定语言(domain specific language,DSL)。

一、在HTML中引用directives

  Directive有驼峰式(camel cased)的风格的命名,如ngBind(放在属性里貌似用不了~)。但directive也可以支蛇底式的命名(snake case),需要通过:(冒号)、-(减号)或_(下划线)连接。作为一个可选项,directive可以用“x-”或者“data-”作为前缀,以满足HTML验证需要。这里列出directive的合法命名:

  1. ng:bind
  2. ng-bind
  3. ng_bind
  4. x-ng-bind
  5. data-ng-bind

  Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。(但很多directive都限制为“属性”的使用方式)

<span class="my-dir: exp;">

  Directive可以通过多种方式引用,下面列出N种等价的方式:

<Meta charset="UTF-8"> invoke-directive @H_404_58@

十二、理解transclusion和scope

  我们经常需要一些可重用的组件。下面是一段伪代码,展示一个简单的dialog组件如何能够工作。

<dialog title="Hello {{username}}."

visible="show"

on-cancel="show = false"

on-ok="show = false; doSomething()">

Body goes here: {{username}} is {{title}}.

  点击“show”按钮将会打开dialog。dialog有一个标题,与数据“username”绑定,还有一段我们想放置在dialog内部的内容。   下面是一段为了dialog而编写的模版定义:

{{title}}

<div class="footer">

<button ng-click="onOk()">Save changes

<button ng-click="onCancel()">Close

  这将无法正确渲染,除非我们对scope做一些特殊处理。

  第一个我们需要解决的问题是,dialog模版期望title会被定义,而在初始化时会与username绑定。此外,按钮需要onOk、onCancel两个function出现在scope里面。这限制了插件的效能(this limits the usefulness of the widget。。。)。为了解决映射问题,通过如下的本地方法(locals,估计在说directive定义模版中的scope)去创建模版期待的本地变量:

title: 'bind',// set up title to accept data-binding

onOk: 'expression',// create a delegate onOk function

onCancel: 'expression',// create a delegate onCancel function

show: 'accessor' // create a getter/setter function for visibility.

}

  在控件scope中创建本地属性,带来了两个问题:

  1. isolation(属性隔离?) - 如果用户忘记了在控件模版设置title这个元素属性,那么title将会与祖先scope的属性”title”(如有)绑定。这是不可预知、不可取的。

  2. transclusion - transcluded DOM可以查看控件的locals(isolate scope?),locals会覆盖transclusion中真正需要绑定的属性。在我们的例子中,插件中的title属性破坏了transclusion的title属性

  为了解决这个缺乏属性隔离的问题,我们需要为这个directive定义一个isolated scope。isoloted scope不是通过从child scope(这里为啥是child scope?不是parent scope吗?)原型继承的,所以我们无需担心属性冲突问题(作为当前scope的兄弟)。

  然而,isolated scope带来了一个新问题:如果transcluded DOM 是控件的isolated scope的一个子元素,那么他将不能与任何东西绑定(if a transcluded DOM is a child of the widget isolated scope then it will not be able to bind to anything)。因此,transcluded scope是原始scope的一个子scope,在控件为本地属性而创建isolated scope之前创建的。transcluded与控件isolated scope属于兄弟节点(scope树中)。

  这也许看起来会有点意想不到的复杂,但这样做让控件用户与控件开发者至少带来了惊喜。(解决了问题)

  因此,最终的directive定义大致如下:

title: 'bind',// create a delegate onCancel function

show: 'accessor' // create a getter/setter function for visibility.

//我试过这么整,失败……请继续往下看

}

  我尝试把上面的代码拼凑成一个完整的例子。直接复制的话,无法达到预期效果。但稍作修改后,插件可以运行了。

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> directive-dialog <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> @H_404_58@

十三、Creating Components

  我们通常会期望通过复杂的DOM结构替换掉directive(所在的元素?目的大概是使directive内部复杂点,看起来牛点@_@)。这让directive成为使用可复用组件的建立应用的一个快捷方式。

  下面是一个可复用组件的例子:

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ZippyModule <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> @H_404_58@

猜你在找的JavaScript相关文章