javascript - 关于Angular Directive 绑定策略中的 “&” 的问题
本文介绍了javascript - 关于Angular Directive 绑定策略中的 “&” 的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
Angular的Directive中，&表示提供一个表达式，可以在父scope上下文中执行。
举个例子：
// HTML
<tr ng-repeat="hwInfo in hwInfoList">
<td>
<button class="btn btn-sm btn-primary ng-upload" file="hwInfo.AttachmentFile" callback="uploadAttach(hwInfo)">
<span class="fa fa-paperclip"></span>
</button>
</td>
</tr>
// 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
<tr ng-repeat="hwInfo in hwInfoList">
<td>
<button class="btn btn-sm btn-primary app-upload" file="hwInfo.AttachmentFile" callback="uploadAttach(hwInfo, file)">
<span class="fa fa-paperclip"></span>
</button>
</td>
</tr>
// 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 } })。
这就达到了我想要的效果了
解决方案
定义:
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"></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>这篇关于javascript - 关于Angular Directive 绑定策略中的 “&” 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
