当前位置：文江博客话题详情

AngularJS directive

angular 自定义指令 repeat bind 怎么不能同时作用在同一元素上

发布于 2022-09-04 01:08:00 字数 1813 浏览 15 评论 0

如题，自己写了两个指令，想作用在同意元素下，先进行repeat，后进行bind，但目前，仅第一个执行bind
图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>angular</title>
    <script src="http://cdn.bootcss.com/angular.js/1.2.10/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="test">
            <input type="text" ng-model="msg">
            <div lxc-bind="msg" lxc-reapeat="3">123123</div>
            <!-- <div lxc-reapeat="3">lxc</div> -->
    </div>
    <script>
        angular.module('app',[])
        .controller('test',function($scope){
                $scope.msg = 'test';
        })
        .directive('lxcBind',function(){
            // Runs during compile
            return {
                restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
                link: function($scope, iElm, iAttrs, controller) {
                        $scope.$watch(iAttrs.lxcBind,function(newValue){
                                iElm.text(newValue);
                        })
                }
            };
        })
        .directive('lxcReapeat',function(){
            return {
                restrict:'A',
                priority: 1000,
                link:function($scope,$elm,$attr){
                    var repeatNum = $attr.lxcReapeat;
                    for (var i=repeatNum-2;i>= 0;i--){
                         var dom = $elm.clone();
                         $elm.after(dom);
                    }
                }
            }
        })
    </script>
</body>
</html>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

童话里做英雄 2022-09-11 01:08:00

第一点，clone方法只是克隆节点，绑定的事件是不会被克隆的。
第二点，动态添加节点到文档，angular 指令是不会生效的，需要动态编译。

angular.module('app',[])
// 注入 $compile 服务，用来动态编译
.directive('lxcReapeat',function($compile){
    return {
        restrict:'A',
        priority: 1000,
        link:function($scope,$elm,$attr){
            var repeatNum = $attr.lxcReapeat;
            for (var i=repeatNum-2;i>= 0;i--){
                 var dom = $elm.clone();
                 // 删除 lxc-reapeat 属性，否则动态编译会造成死循环。理解这点很重要
                 dom.removeAttr('lxc-reapeat');
                 // 动态编译并连接到scope
                 var ele = $compile(dom)($scope);
                 $elm.after(ele);
            }
        }
    }
})

效果图：
图片描述

图片描述

与ng-repeat
图片描述

上面这种实现，功能上没有问题，但是阵型并不是很统一。于是，稍作修改

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>angular</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="app">
    <div ng-controller="test">
        <p ng-repeat="i in [1,2,3]">{{i}}</p>
        <input type="text" ng-model="msg">
        <div lxc-bind="msg" lxc-reapeat="3">123123</div>
    </div>
    <script>
        angular.module('app',[])
        .controller('test',function($scope){
            $scope.msg = 'test';
        })
        .directive('lxcBind',function(){
            return {
                restrict: 'A',
                link: function($scope, iElm, iAttrs, controller) {
                    console.log(2)
                    $scope.$watch(iAttrs.lxcBind,function(newValue){
                        iElm.text(newValue);
                    })
                }
            };
        })
        .directive('lxcReapeat',function($compile){
            return {
                restrict:'A',
                priority: 1000,
                link: function(scope, iElement, iAttrs, controller){
                    
                    var repeatNum = iAttrs.lxcReapeat,
                        $parent = iElement.parent(),
                        html = '';

                    iElement.remove();

                    for (var i = 0; i < repeatNum; i++){
                        if( i == 0 ){
                            html = '<!-- lxcReapeat: '+repeatNum+' -->';
                        }else{
                            html = '<!-- end lxcReapeat: '+repeatNum+' -->';
                        }
                        var dom = iElement.clone()[0];
                        dom.removeAttribute('lxc-reapeat');
                        dom = $compile(html+dom.outerHTML)(scope);
                        $parent.append(dom);
                        dom.attr('lxc-reapeat', repeatNum).addClass('lxc-bind');
                    }

                    $parent.append(html);
                    
                }
            }
        })
    </script>
</body>
</html>

最终对比
图片描述

请采纳。

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文