问答: - 问答 - 第一PHP社区 php1.cn

问

发布于 1970-01-01 08:00

3 个回答

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

2022-11-26 20:29 回答

木头人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 = '';
            }
        };
    };
});

2022-11-26 20:29 回答

北斗七星

定义:
callback : “& uploadAttach(hwInfo)” 这里是伪代码，只是为了表明定义和关联方法

传参:
callback({hwInfo:'123'})

之前手机回答，不太好编辑符号，这样就可以调用。

因为你之前调用的是 hwInfo in hwInfoList，hwInfo 会引起变量覆盖。我把传参改为 arg，重新写了个demo，，你可以运行一次啊，就能看到 callback({hwInfo:'123'}) 这种方式是对的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js?1.2.1"></script>
</head>
<body ng-app="myApp" ng-controller="myController">

<table>
<tr ng-repeat="hwInfo in hwInfoList">
    <td>
        <button class="btn btn-sm btn-primary app-upload" file="hwInfo.AttachmentFile" callback="uploadAttach(hwInfo)"><!--  1:定义:callback : “& uploadAttach(arg)” -->
            <span class="fa fa-paperclip">{{ hwInfo.hwInfoCaption }}</span>
        </button>
    </td>
</tr>
</table>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.hwInfoList = [
        {
            AttachmentFile : 'jpg',
            hwInfoCaption  : 'Hello',
            file : {ID : "ABC"}
        },
        {
            AttachmentFile : 'jpg',
            hwInfoCaption  : 'World',
            file : {ID : "BCD"}
        }
    ];
    $scope.uploadAttach = function(hwInfo) {
        console.log(hwInfo.file.ID);
        /*
            3:调用，方式一
                使用 scope.callback({hwInfo:{file: {ID : window.fileIndex} } }); 调用：
                返回：    100001
                        100002
        */
        /*
            3:调用，方式二，
                使用 scope.callback(); 调用：
                返回：    ABC
                        BCD
        */
        
        return function (file) {
            if (file) {
                model.fileID = file.ID;
            } else {
                model.fileID = '';
            }
        };
    };
});
app.directive('appUpload', [    //你这里有问题，需要用驼峰法
    function () {
        function link(scope, element, attrs) {
            window.fileIndex = ++window.fileIndex || 100001;
            scope.callback({hwInfo:{file: {ID : window.fileIndex} } }); /* 3:调用，方式一，传参方式 */
            //scope.callback(); /* 3:调用，方式二，不指定hwInfo，因为重名，它会使用 hwInfo in hwInfoList 的 hwInfo */
        }
        return {
            restrict: 'C',
            scope: {
                uploader: '=',     // 入参，上传文件地址
                file: '=',         // 入参，已有文件
                viewOnly: '@',     // 入参，只需要查看
                callback: '&'      // 入参，回调数据  /* 2:关联 */
            },
            link: link
        };
    }
]);

</script>
</body>
</html>

2022-11-26 20:29 回答

手机用户2602921813

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签