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

有时候我我们要嵌入指令元素本身,而不仅仅是它的内容。在这种情况下,我们需要使用 transclude:'element'。它和 transclude:true 不同,它将标记了 ng-transclude 指令的元素一起包含到了指令模板中。使用transclusion,你的link函数会获得一个名叫 transclude 的链接函数,这个函数绑定了正确的指令scope,并且传入了另一个拥有被嵌入DOM元素拷贝的函数。你可以在这个 transclude 函数中执行比如修改元素拷贝或者将它添加到DOM上等操作。 类似 ng-repeat 这样的指令使用这种方式来重复DOM元素。仔细研究一下这个Plunker,它使用这种方式复制了DOM元素,并且改变了第二个实例的背景色。

同样需要注意的是,在使用 transclude:'element'的时候,指令所在的元素会被转换成HTML注释。所以,如果你结合使用 transclude:'element' 和 replace:false,那么指令模板本质上是被添加到了注释的innerHTML中——也就是说其实什么都没有发生!相反,如果你选择使用 replace:true,指令模板会替换HTML注释,那么一切就会如果所愿的工作。使用 replade:false 和 transclue:'element'有时候也是有用的,比如当你需要重复DOM元素但是并不想保留第一个元素实例(它会被转换成注释)的情况下。对这块还有疑惑的同学可以阅读stackoverflow上的这篇讨论,介绍的比较清晰。

controller 函数和 require

如果你想要允许其他的指令和你的指令发生交互时,你需要使用 controller 函数。比如有些情况下,你需要通过组合两个指令来实现一个UI组件。那么你可以通过如下的方式来给指令添加一个 controller 函数。

app.directive('outerDirective', function() { return { scope: {}, restrict: 'AE', controller: function($scope, $compile, $http) { // $scope is the appropriate scope for the directive this.addChild = function(nestedDirective) { // this refers to the controller console.log('Got the message from nested directive:' + nestedDirective.message); }; } }; });

这个代码为指令添加了一个名叫 outerDirective 的controller。当另一个指令想要交互时,它需要声明它对你的指令 controller 实例的引用(require)。可以通过如下的方式实现:

app.directive('innerDirective', function() { return { scope: {}, restrict: 'AE', require: '^outerDirective', link: function(scope, elem, attrs, controllerInstance) { //the fourth argument is the controller instance you require scope.message = "Hi, Parent directive"; controllerInstance.addChild(scope); } }; });

相应的HTML代码如下:

<outer-directive> <inner-directive></inner-directive> </outer-directive>

require: ‘^outerDirective' 告诉Angular在元素以及它的父元素中搜索controller。这样被找到的 controller 实例会作为第四个参数被传入到 link 函数中。在我们的例子中,我们将嵌入的指令的scope发送给父亲指令。如果你想尝试这个代码的话,请在开启浏览器控制台的情况下打开这个Plunker。同时,这篇Angular官方文档上的最后部分给了一个非常好的关于指令交互的例子,是非常值得一读的。

一个记事本应用

这一部分,我们使用Angular指令创建一个简单的记事本应用。我们会使用HTML5的 localStorage 来存储笔记。最终的产品在这里,你可以先睹为快。
我们会创建一个展现记事本的指令。用户可以查看他/她创建过的笔记记录。当他点击 add new 按钮的时候,记事本会进入可编辑状态,并且允许创建新的笔记。当点击 back 按钮的时候,新的笔记会被自动保存。笔记的保存使用了一个名叫 noteFactory 的工厂类,它使用了 localStorage。工厂类中的代码是非常直接和可理解的。所以我们就集中讨论指令的代码。

第一步

我们从注册 notepad 指令开始。

app.directive('notepad', function(notesFactory) { return { restrict: 'AE', scope: {}, link: function(scope, elem, attrs) { }, templateUrl: 'templateurl.html' }; });

这里有几点需要注意的:

因为我们想让指令可重用,所以选择使用隔离的scope。这个指令可以拥有很多与外界没有关联的属性和方法。
这个指令可以以属性或者元素的方式被使用,这个被定义在 restrict 属性中。
现在的link函数是空的
这个指令从 templateurl.html 中获取指令模板
第二步

下面的HTML组成了指令的模板。

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

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