Jos*_*son 67 angularjs angularjs-directive
我在控制器中定义的函数与指令中的回调函数绑定时遇到了一些麻烦.我的代码如下所示:
在我的控制器中:
$scope.handleDrop = function ( elementId, file ) {
console.log( 'handleDrop called' );
}
然后我的指示:
.directive( 'myDirective', function () {
return {
scope: {
onDrop: '&'
},
link: function(scope, elem, attrs) {
var myFile, elemId = [...]
scope.onDrop(elemId, myFile);
}
} );
在我的html页面中:
<my-directive on-drop="handleDrop"></my-directive>
上面的代码没有运气.从我在各种教程中阅读的内容中我了解到,我应该在HTML页面中指定参数？
Nur*_*iel 116
可以在缩小时存活的替代方法
保留你的HTML格式:
<my-directive on-drop="handleDrop"></my-directive>
将呼叫更改为:
scope.onDrop()('123','125')
注意给onDrop的额外开括号和右括号.这将实例化函数而不是注入函数的代码.
为什么它更好
更改handleDrop()定义中的参数名称(如果正确处理它们,甚至添加更多名称)将不会让您更改html中的每个指令注入.干嘛.
正如@TrueWill建议的那样,我几乎可以肯定其他解决方案无法在缩小时继续存在,而这种方式代码保持最大的灵活性并且与名称无关.
另一个个人原因是对象语法,这使我编写了更多的代码:
functionName({xName: x, yName: y})
(并在每个指令调用中添加函数签名)
反对
functionName()(x,y)
(零维护你的HTML)
我发现这个伟大的解决方案在这里.
希望有所帮助!
Aja*_*wal 77
您的代码中有一个小错误,请尝试下面的代码,它应该适合您
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
</head>
<body ng-controller="test" >
<!-- tabs -->
<div my-directive on-drop="handleDrop(elementId,file)"></div>
<script>
var app = angular.module('test', []);
app.directive('myDirective', function () {
return {
scope: {
onDrop: '&'
},
link: function (scope, elem, attrs) {
var elementId = 123;
var file = 124;
scope.onDrop({elementId:'123',file:'125'});
}
}
});
app.controller('test', function ($scope) {
alert("inside test");
$scope.handleDrop = function (elementId, file) {
alert(file);
}
});
</script>
</body>
</html>