作者:魅由心生先_941 | 来源:互联网 | 2020-07-29 15:16
这次给大家带来angular的scopel指令使用详解,使用angular的scopel指令注意事项有哪些,下面就是实战案例,一起来看一下。
我们来创建一个自定义指令
使用自定义指令像上面一样的确不错,但是如果你想要对每一个指令渲染出来的按钮定制化,则好像不可以,比如下面我们创建一堆这个自定义指令,他们长得一模一样:
这样写太麻烦了,所以我们的angular为我们的自定义指令提供了一个配置项叫scope,所以,我们可以如下这样写:
要看懂上面的只要注意两点:
这里的独立作用域里面的a代表的是template里面的模型a
=b代表的是要angular去寻找视图里面的当前指令的属性b
属性b的值需要去外部作用域里面去寻找
如果你想在指令作用域里绑定的模型的名字和外部使用的时候的属性名一样,可以省写成如下:
当然,上面的=号是双向数据绑定:
如果只是想单向的数据通信,可以用@符号:
如果想用ng-class,也是可以的:
最后,还有一个scope可以设置是引用外部作用域的方法
相信看了本文案例你已经掌握了方法,更多精彩请关注 第一PHP社区 其它相关文章!
推荐阅读:
Angular Material的使用详解
css中id选择器的命名规则有哪些
让元素水平垂直居中冷门方法
以上就是angular的scopel指令使用详解的详细内容,更多请关注 第一PHP社区 其它相关文章!