我想创建一个链接到属性的指令。该属性指定应在作用域上调用的函数。但我还想将一个参数传递给在link函数中确定的函数。
<div my-method='theMethodToBeCalled'></div>
在链接函数中,我绑定了一个jQuery事件,该事件传递需要传递给函数的参数:
app.directive("myMethod",function($parse) {
restrict:'A',
link:function(scope,element,attrs) {
var expressionHandler = $parse(attrs.myMethod);
$(element).on('theEvent',function( e, rowid ) {
id = // some function called to determine id based on rowid
scope.$apply(function() {expressionHandler(id);});
}
}
}
app.controller("myController",function($scope) {
$scope.theMethodToBeCalled = function(id) { alert(id); };
}
在不传递id的情况下,我可以让它工作,但是一旦我试图传递一个参数,函数就不再被调用
发布于 2013-11-22 02:19:17
与推荐的角度方法(如treeface的expressionHandler所示)形成对比的是使用回调表达式,该表达式不需要定义expressionHandler。在marko的示例中,change:
在模板中
<div my-method="theMethodToBeCalled(myParam)"></div>
In指令链接函数
$(element).click(function( e, rowid ) {
scope.method({myParam: id});
});
与marko的解决方案相比,这确实有一个缺点-在第一次加载时,将在未定义myParam ===的情况下调用theMethodToBeCalled函数。
可以在@treeface Plunker上找到一个工作示例
发布于 2013-07-10 20:20:08
不知道你到底想要做什么。但这里仍然有一个可能的解决方案。
在本地作用域中创建一个具有‘&’属性的作用域。它“提供了一种在父作用域的上下文中执行表达式的方法”(有关详细信息,请参阅directive documentation )。
我还注意到,您使用了一个速记链接函数,并在其中插入了对象属性。你不能这么做。更清楚的是(imho)只返回指令定义对象。请参阅下面的代码。
下面是一个代码示例和一个fiddle。
<div ng-app="myApp">
<div ng-controller="myController">
<div my-method='theMethodToBeCalled'>Click me</div>
</div>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive("myMethod",function($parse) {
var directiveDefinitionObject = {
restrict: 'A',
scope: { method:'&myMethod' },
link: function(scope,element,attrs) {
var expressionHandler = scope.method();
var id = "123";
$(element).click(function( e, rowid ) {
expressionHandler(id);
});
}
};
return directiveDefinitionObject;
});
app.controller("myController",function($scope) {
$scope.theMethodToBeCalled = function(id) {
alert(id);
};
});
</script>
发布于 2015-11-06 03:11:33
通过使用attrName: "&"
引用外部作用域中的表达式,您可以创建一个指令,该指令使用params执行函数调用。
我们希望用ng-click-x
替换ng-click
指令
<button ng-click-x="add(a,b)">Add</button>
如果我们有这样的作用域:
$scope.a = 2;
$scope.b = 2;
$scope.add = function (a, b) {
$scope.result = parseFloat(a) + parseFloat(b);
}
我们可以这样写我们的指令:
angular.module("ng-click-x", [])
.directive('ngClickX', [function () {
return {
scope: {
// Reference the outer scope
fn: "&ngClickX",
},
restrict: "A",
link: function(scope, elem) {
function callFn () {
scope.$apply(scope.fn());
}
elem[0].addEventListener('click', callFn);
}
};
}]);
这是一个现场演示:http://plnkr.co/edit/4QOGLD?p=info
https://stackoverflow.com/questions/17556703
复制相似问题