Augular JS 中指令传递数据

雨后的夕阳

于 2017-04-20 10:36:22 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： augularJS

本文链接：https://blog.youkuaiyun.com/suyongsimple/article/details/70255791

augularJS 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的AngularJS示例，介绍了如何使用@绑定策略来实现数据从父作用域到指令内部作用域的一次性复制。该策略适用于不需要双向同步更新的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Augular JS 中向指令传递数据

@绑定策略的使用

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="./js/angular.js"></script>
</head>
<body>

<label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive
     some-attr="{{theirUrl}}"
     my-link-text="Click me to go to Google"></div>

<script>
    angular.module('myApp', [])
            .directive('myDirective', function() {
                return {
                    restrict: 'A',
                    replace: true,
                    scope: {
                        myUrl: '@someAttr',
                        myLinkText: '@'
                    },
                    template: '\
                          <div>\
                            <label>My Url Field:</label>\
                            <input type="text" ng-model="myUrl" />\
                            <a href="{{myUrl}}">{{myLinkText}}</a>\
                          </div>\
        '
                }
            })
</script>

</body>
</html>