深入学习JavaScript的AngularJS框架中指令的使用方法(4)

我们称这种方式为单项绑定,是因为在这种方式下,你只能将字符串(使用表达式{{}})传递给参数。当父scope的属性变化时,你的隔离scope模型中的属性值跟着变化。你甚至可以在指令内部监控这个scope属性的变化,并且触发一些任务。然而,反向的传递并不工作。你不能通过对隔离scope属性的操作来改变父scope的值。

注意点:
当隔离scope属性和指令元素参数的名字一样是,你可以更简单的方式设置scope绑定:

app.directive('helloWorld', function() { return { scope: { color: '@' }, .... // the rest of the configurations }; });

相应使用指令的HTML代码如下:

<hello-world color="{{color}}"/>

选择二:使用 = 实现双向绑定

让我们将指令的定义改变成下面的样子:

app.directive('helloWorld', function() { return { scope: { color: '=' }, .... // the rest of the configurations }; });

相应的HTML修改如下:

<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color="color"/> </body>

与 @ 不同,这种方式让你能够给属性指定一个真实的scope数据模型,而不是简单的字符串。这样你就可以传递简单的字符串、数组、甚至复杂的对象给隔离scope。同时,还支持双向的绑定。每当父scope属性变化时,相对应的隔离scope中的属性也跟着改变,反之亦然。和之前的一样,你也可以监视这个scope属性的变化。

选择三:使用 & 在父scope中执行函数

有时候从隔离scope中调用父scope中定义的函数是非常有必要的。为了能够访问外部scope中定义的函数,我们使用 &。比如我们想要从指令内部调用 sayHello() 方法。下面的代码告诉我们该怎么做:

app.directive('sayHello', function() { return { scope: { sayHelloIsolated: '&amp;' }, .... // the rest of the configurations }; });

相应的HTML代码如下:

<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <say-hello sayHelloIsolated="sayHello()"/> </body>

这个 Plunker 例子对上面的概念做了很好的诠释。

父scope、子scope以及隔离scope的区别

作为一个Angular的新手,你可能会在选择正确的指令scope的时候感到困惑。默认情况下,指令不会创建一个新的scope,而是沿用父scope。但是在很多情况下,这并不是我们想要的。如果你的指令重度地使用父scope的属性、甚至创建新的属性,会污染父scope。让所有的指令都使用同一个父scope不会是一个好主意,因为任何人都可能修改这个scope中的属性。因此,下面的这个原则也许可以帮助你为你的指令选择正确的scope。

1.父scope(scope: false) – 这是默认情况。如果你的指令不操作父scoe的属性,你就不需要一个新的scope。这种情况下是可以使用父scope的。

2.子scope(scope: true) – 这会为指令创建一个新的scope,并且原型继承自父scope。如果你的指令scope中的属性和方法与其他的指令以及父scope都没有关系的时候,你应该创建一个新scope。在这种方式下,你同样拥有父scope中所定义的属性和方法。

3.隔离scope(scope:{}) – 这就像一个沙箱!当你创建的指令是自包含的并且可重用的,你就需要使用这种scope。你在指令中会创建很多scope属性和方法,它们仅在指令内部使用,永远不会被外部的世界所知晓。如果是这样的话,隔离的scope是更好的选择。隔离的scope不会继承父scope。

Transclusion(嵌入)

Transclusion是让我们的指令包含任意内容的方法。我们可以延时提取并在正确的scope下编译这些嵌入的内容,最终将它们放入指令模板中指定的位置。 如果你在指令定义中设置 transclude:true,一个新的嵌入的scope会被创建,它原型继承子父scope。 如果你想要你的指令使用隔离的scope,但是它所包含的内容能够在父scope中执行,transclusion也可以帮忙。

假设我们注册一个如下的指令:

app.directive('outputText', function() { return { transclude: true, scope: {}, template: '<div ng-transclude></div>' }; });

它使用如下:

<div output-text> <p>Hello {{name}}</p> </div>

ng-transclude 指明在哪里放置被嵌入的内容。在这个例子中DOM内容 <p>Hello {{name}}</p> 被提取和放置到 <div ng-transclude></div> 内部。有一个很重要的点需要注意的是,表达式{{name}}所对应的属性是在父scope中被定义的,而非子scope。你可以在这个Plunker例子中做一些实验。如果你想要学习更多关于scope的知识,可以阅读这篇文章。

transclude:'element' 和 transclude:true的区别

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyxzx.html