AngularJS在自定义指令中传递Model

最新推荐文章于 2018-08-22 03:38:01 发布

影山大法好

最新推荐文章于 2018-08-22 03:38:01 发布

阅读量714

点赞数

分类专栏： Web前端文章标签： angularjs 自定义指令

本文链接：https://blog.csdn.net/qiujiawen001/article/details/44782087

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文是对AngularJS权威指南8.2节的理解，书中的解释比较混乱，花了一些时间才理解作者表达的意思。

假如我们创建了一个指令，用于生成一个包含input和a标签。如果我们想input标签的内容通过ng-model的方式传递出去（例如传递到指令外的另一个input），我们可能会这么写：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="angular.js"></script>
</head>
<body>
<input type="text" ng-model="myUrl"/>
<div my-directive
     some-attr="{{myUrl}}"
     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>\
            <input type="text" ng-model="myUrl" />\
            <a href="{{myUrl}}">{{myLinkText}}</a>\
          </div>\
        '
                }
            })
</script>
</body>
</html>

生成的HTML如下图所示：

这里写图片描述

但是这不能达到我们的预期：数据只能从第一个input传递到第二个input，而不能从第二个input传递到第一个input。

原因是指令内部有独立的作用域，指令内的{{myUrl}}不能直接被外部共享。

将代码做如下修改，可以实现被外部共享，注意修改的部分有注释：

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8"/>
    <script src="angular.js"></script>
</head>
<body>
<input type="text" ng-model="myUrl"/>
<!--*****************************************-->
<!--{{myUrl}}改为了myUrl-->
<div my-directive
     some-attr="myUrl"
     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>\
            <input type="text" ng-model="myUrl" />\
            <a href="{{myUrl}}">{{myLinkText}}</a>\
          </div>\
        '
                }
            })
</script>
</body>
</html>

总结

指令内部model共享到外部，只需要将”@”改为”=”，并且将对应的指令的{{}}删掉即可。

影山大法好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS在自定义指令中传递Model

本文是对AngularJS权威指南8.2节的理解，书中的解释比较混乱，花了一些时间才理解作者表达的意思。假如我们创建了一个指令，用于生成一个包含input和a标签。如果我们想input标签的内容通过ng-model的方式传递出去（例如传递到指令外的另一个input），我们可能会这么写：<!doctype html><html ng-app="myApp"><head> <script s
复制链接

扫一扫