javascript - 关于Angular Directive 绑定策略中的 “&” 的问题
黄舟
黄舟 2017-04-11 13:32:49
[JavaScript讨论组]

Angular的Directive中,&表示提供一个表达式,可以在父scope上下文中执行。

举个例子:

// HTML

    
        
    


// Javascript
app.directive('ng-upload', [
    function () {
        function link($scope, element, attrs) {
            // ...
            
            $scope.callback('123');
        }

        return {
            restrict: 'C',
            scope: {
                uploader: '=?',     // 入参,上传文件地址
                file: '=?',         // 入参,已有文件
                viewOnly: '@?',     // 入参,只需要查看
                callback: '&?'      // 入参,回调数据
            },
            link: link
        };
    }
]);

app.controller('myController', function ($scope) {
    $scope.uploadAttach = function (model) {
        return function (file) {
            if (file) {
                model.fileID = file.ID;
            } else {
                model.fileID = '';
            }
        };
    };
});

上面的代码是我理想的情况,实际情况是并没有按照设想的工作。

我想问下,有没有办法可以在传给指令的回调函数中传入自定义的参数?

----------------------------------分割线-------------------------------------

经过对angularJS的指令API解读以及综合各位朋友的回答,我总结出了一种既能在外面传参数,也能在指令内部传参数的方法。上代码:

// HTML

    
        
    


// Javascript
app.controller('myCtrl', [
    '$scope',
    function ($scope, $locale) {
        $scope.hwInfoList = [
            {
                caption  : 'Hello',
                file : {ID : "ABC"}
            },
            {
                caption  : 'World',
                file : {ID : "BCD"}
            }
        ];
        $scope.uploadAttach = function (hwInfo, file) {
            console.log(arguments);
            if (file) {
                hwInfo.fileID = file.ID;
            } else {
                hwInfo.fileID = '';
            }
        };
    }
]);

app.directive('appUpload', [    //你这里有问题,需要用驼峰法
    function () {
        function link(scope, element, attrs) {
            element.on('click', function () {
                scope.callback({ file: { ID: 12 } });
            });
        }
        return {
            restrict: 'A',
            scope: {
                uploader: '=',     // 入参,上传文件地址
                file: '=',         // 入参,已有文件
                viewOnly: '@',     // 入参,只需要查看
                callback: '&'      // 入参,回调数据  /* 2:关联 */
            },
            link: link
        };
    }
]);

callback="uploadAttach(hwInfo, file)" 这句话声明传递给回调函数的两个参数,其中hwInfo来自外部ng-repeat="hwInfo in hwInfoList",file从指令内部传递scope.callback({ file: { ID: 12 } })

这就达到了我想要的效果了

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
伊谢尔伦

尽量不要用class做指令,根据你的代码,我改了一下,你看看能不能work:

// HTML
<tr ng-repeat="hwInfo in hwInfoList">
    <td>
        <button ng-upload class="btn btn-sm btn-primary" file="hwInfo.AttachmentFile" callback="uploadAttach" hwInfo="hwInfo">
            <span class="fa fa-paperclip"></span>
        </button>
    </td>
</tr>

// Javascript
app.directive('ng-upload', [
    function () {
        function link($scope, element, attrs) {
            // ...
            
            $scope.callback($scope.hwInfo);
        }

        return {
            restrict: 'A',
            scope: {
                uploader: '=?',     // 入参,上传文件地址
                file: '=?',         // 入参,已有文件
                viewOnly: '@?',     // 入参,只需要查看
                callback: '&?',      // 入参,回调数据
                hwInfo: '='
            },
            link: link
        };
    }
]);

app.controller('myController', function ($scope) {
    $scope.uploadAttach = function (model) {
        return function (file) {
            if (file) {
                model.fileID = file.ID;
            } else {
                model.fileID = '';
            }
        };
    };
});
伊谢尔伦

只知道=,@,&是用来绑定父级作用域的属性的,callback用&绑定后和父级作用域的就不是一个了,传参的话直接传肯定不行,放在$attr中是比较好的办法
这个callback放在指令中执行,为什么要从父级controller传过来呢,直接定义在指令中不是更好?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号