绵阳梓潼网站制作公司

angular中scopel指令怎么用

这篇文章将为大家详细讲解有关angular中scopel指令怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为绛县企业提供专业的做网站、网站设计，绛县网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

我们来创建一个自定义指令


    
    Document
    
    
        
    
         

angular中scopel指令怎么用

使用自定义指令像上面一样的确不错，但是如果你想要对每一个指令渲染出来的按钮定制化，则好像不可以，比如下面我们创建一堆这个自定义指令，他们长得一模一样：


    
    Document
    
    
        
        
        
        
    
         


angular中scopel指令怎么用

一种思路是把这几个自定义的指令按钮放到不同的控制器里面，然后控制器里通过$scope上下文传递不同的值：

  
   
    Document
    
    
        
    
                  
                            

angular中scopel指令怎么用

这样写太麻烦了，所以我们的angular为我们的自定义指令提供了一个配置项叫scope,所以，我们可以如下这样写：


    
    Document
    
    
      
      
      
    
    
    

要看懂上面的只要注意两点：

这里的独立作用域里面的a代表的是template里面的模型a

=b代表的是要angular去寻找视图里面的当前指令的属性b

属性b的值需要去外部作用域里面去寻找

如果你想在指令作用域里绑定的模型的名字和外部使用的时候的属性名一样，可以省写成如下：


    
    Document
    
    
      
      
      
    
    
    

当然，上面的=号是双向数据绑定：


    
    Document
    
    
      
    
    
    

如果只是想单向的数据通信，可以用@符号：


    
    Document
    
    
      
    
    
    

如果想用ng-class，也是可以的：


    
    Document
    
    
      
    
    
    

最后，还有一个scope可以设置是引用外部作用域的方法


    
    Document
    
    
      
    
    
    

关于“angular中scopel指令怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


网站栏目：angular中scopel指令怎么用
链接地址：http://myzitong.com/article/ipcohc.html

其他资讯