您的位置：首页 > Web前端 > AngularJS

angularjs向指令中传递数据

2016-08-24 16:36 351 查看

我们在定义一个指令的时候，有些情况下，希望一些如url的信息不会混在指令内部，以为使用指令的人带来更好的体验。在这种情况下我们可以为指令提供一个公共的接口。方法如下。

定义一个指令：

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template: '<a href="#">click here!</a>'
}
});

并将它使用在html页面中：

<body ng-app="myApp">
<my-directive></my-directive>
</body>

创建子作用域，代码修改为：

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
scope: {
myUrl: '@', //绑定策略
},
template: '<a href="{{myUrl}}">click here!</a>'
}
});

我们在作用域对象内部把myUrl值设置为@这个绑定策略。这个绑定策略告诉AngularJS将DOM中my-url属性的值复制给新作用域对象中的myUrl属性。

然后修改html文件为：

<body ng-app="myApp">
<my-directive my-url="http://www.baidu.com"></my-directive>
</body>

结构如我们想象的一样，href中成功添加了我们指定的链接，点击后成功跳转到该页面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 数据

相关文章推荐

新的分享

章节导航