SEARU.ORG
当前位置:SEARU.ORG > Linux 新闻 > 正文

AngularJS directive 创建属于你自己最简单的指令

最近写了一个自己做的angular动画插件,想要把它封装成比较通俗的指令,于是在网上找了好多angular封装指令的方法,下面就来给大家分享一下。。。。。

首先介绍一下angular指令的表现形式,目前我了解到的主要有四种:

  1. 一个新的HTML元素

<data-hello></data-hello>

    2.元素的属性

<input type="text" data-hello/>

    3.CSS class

<input type="text" class="data-hello"/>

    4.注释

<!-directive:data-hello->

那OK,既然我们知道了angular的指令使用方法,下面我们就要学会怎么做一个指令啦

那么现在就来做一个最简单的hello-word指令

angular.module('myApp',[]).directive('helloWorld',function(){
    return {
        restrict:'AE',
        replace:'true',
        template:'<h1>Hello World!</h1>'
    };
});

那么这个指令我们封装好了,怎么调用呢?  很简单,看下面——-

<hello-world>
//write something
</hello-world>

没错,这样最简单的一个Hello World指令就做好了,那么接下来说一下这个方法,

directive这个方法有两个参数,

第一个当然就是我们要做的这个指令的名字啦,记住这里要用驼峰(cameCase)命名法,这样我们调用这个指令的时候,就可以用hello-world来调用了。

第二个参数是一个回调函数,我们所要做的所有功能都是写在这个回调函数里面的。OK,接下来就仔细讲一下这个回调函数

大家可以很明显地看到,这个函数需要返回了一个对象,那么它返回的这个对象中有三个属性,接下来我们介绍一下这三个属性的作用:

  1. restrict-这个属性用来指定指令在HTML中如何使用,就是我们之前说的四种表现形式。。。  在这个例子中,我们使用了’AE’,所以这个指令可以被当做新的HTML元素或者属性来使用,那么如果我们想要让这个指令当做class来使用呢?我们可以将restrict这个值设置成  ‘AEC’

  2. template-这个属性规定了指令被Angular编译和链接后生成的HTML标记。当然了,我们可以把这个值变得很复杂,可以在这里面写多个div,多个样式,那么你就会想到,既然这样,我是不是完全可以写一个页面呢?  当然是可以的,甚至于你可以将你要实现的模板写到一个HTML文件里,然后将这个值改为templateUrl,将templateUrl指向你说写的HTML文件,这就有点像是模板注入了,所以这个地方是可以很灵活地使用的。。。哈哈,是不是发现有点骚

  3. replace-这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们刚才的这个例子中,我们用了

    <hello-world></hello-world>的方式来使用我们的指令,并且将replace设置为true,因此,在改指令被Angular编译后,生成的模板会替换掉<hello-world></hello-world>。所以最终输出的是<h1>Hello World!</h1>。那么如果将这个值设置成false会怎么样呢?那么生成的模板会被插入到定义指令的元素中。

好啦,到这里,我们最简单的一个Angular自定义指令就完成了,是不是很简单呢。。。

当然啦,肯定会有人问,这样我要做的功能很复杂怎么办?要调用到页面元素怎么办?要有动态渲染怎么办?

这些其实都是可以实现的,我们可以在directive的回调函数中,将返回的对象加入更多的属性值,以此来达到我们更多的目的。。。具体步骤我们下次再来一篇深入的介绍哈O(∩_∩)O

未经允许不得转载:SEARU.ORG » AngularJS directive 创建属于你自己最简单的指令

赞 (0)
分享到:更多 ()

评论 0