分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular 几篇关于指令的好文章收录(二)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这个系列教程的第一部分给出了AngularJS指令的基本概述，在文章的最后我们介绍了如何隔离一个指令的scope。第二部分将承接上一篇继续介绍。首先，我们会看到在使用隔离scope的情况下，如何从指令内部访问到父scope的属性。接着，我们会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。

隔离scope和父scope之间的数据绑定

通常，隔离指令的scope会带来很多的便利，尤其是在你要操作多个scope模型的时候。但有时为了使代码能够正确工作，你也需要从指令内部访问父scope的属性。好消息是Angular给了你足够的灵活性让你能够有选择性的通过绑定的方式传入父scope的属性。让我们重温一下我们的helloWorld指令，它的背景色会随着用户在输入框中输入的颜色名称而变化。还记得当我们对这个指令使用隔离scope的之后，它不能工作了吗？现在，我们来让它恢复正常。

假设我们已经初始化完成app这个变量所指向的Angular模块。那么我们的 HelloWorld 指令如下面代码所示：

 
   @H_874_13@ 
     
JavaScript

@H_450_42@

@H_502_65@ 10

@H_607_87@

 
        app 
        . 
        directive 
        ( 
        'HelloWorld' 
        , 
          
        function 
        ( 
        ) 
          
        { 
       
        return 
        { 
       
        scope 
        : 
        { 
        } 
        Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 
       
        restrict 
          
        'AE' 
        Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 
       
        replace 
        true 
        Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 
       
        template 
        '<p style="background-color:{{color}}">Hello World</p>' 
        Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 
       
        link 
        ( 
        scope 
          
        elem 
        attrs 
        { 
       
        . 
        bind 
        'click' 
        { 
       
        . 
        css 
        'background-color' 
        Crayon-sy" style="border: 0px; margin: 0px; padding: 0px; font-size: inherit !important; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 
        'white' 
        ) 
        ; 
       
        . 
        $ 
        apply 
        ( 
        { 
       
        . 
        color 
          
        = 
        "white" 
        ; 
       
        ; 
       
        ; 
       
        'mouSEOver' 
        { 
       
        'cursor' 
        'pointer' 
        ; 
       
        ; 
       
        } 
       
        ; 
       
        ;