我们在定义一个指令的时候,有些情况下,希望一些如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中成功添加了我们指定的链接,点击后成功跳转到该页面。