angularjs向指令中传递数据

最新推荐文章于 2022-03-03 00:15:00 发布

qq_25237861

最新推荐文章于 2022-03-03 00:15:00 发布

阅读量3.9k

点赞数 2

文章标签： angularjs 数据

本文链接：https://blog.csdn.net/qq_25237861/article/details/52301826

版权

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

qq_25237861

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫