AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令 [英] AngularJs pass instance of each ng-repeat in HTML to directive
问题描述
我认为这应该很简单,但我遗漏了一些东西.如何将下面的 ng-repeat
中的 flowObj
传递给我的指令?我想将它传递给我的指令,然后在单击时使用该 FlowObj
,然后应用一些逻辑.我尝试在指令中使用注释代码
范围:{测试:"@"}
但这似乎搞砸了我的 CSS.
HTML:
<头><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">头部><身体><div id="center_outer"><div id="center_inner" ng-controller="CtrlPageFlow"><div flowclick class="cflow" ng-repeat="flowObj in flow">{{flowObj.name}}
</html>
这是我的指令
angular.module('directives', ['opsimut']).directive('flowclick', function() {返回 {/*范围: {test:"@"//在指令的作用域上设置属性名称},*/链接:函数(范围,元素,属性){elem.bind('click', function(scope) {调试器;警报(范围.flowObj);//scope.name += '!';//scope.$apply();});}};});
基于答案的解决方案:
angular.module('directives', ['opsimut']).指令('流点击',函数(){返回 {链接:函数(e,elem,attr){//scope 是指令的作用域,//elem 是指令根元素的 jquery lite(或 jquery full)对象.//attr 是指令元素上的属性字典.elem.bind('click', function(e1) {调试器;警报(e.flowObj);}, e);}};});
解决方案:从指令中删除整个 scope
属性,一切都应该按预期工作.>
另外:您需要从这一行重命名 scope
参数:
elem.bind('click', function(scope) {
类似于:
elem.bind('click', function(e) {
因为您在事件处理程序中使用相同的名称覆盖了对 scope
的访问.
解释:
ng-repeat
指令使其每个克隆都有自己的新范围.由于默认情况下元素上的指令共享范围,因此与 ng-repeat
一起放置的任何其他指令共享其范围并可以访问当前迭代的 $scope
变量.换句话说,您的自定义指令已经与 ng-repeat
共享范围,并且默认可以访问 flowObj
.
在自定义指令上指定 scope
属性时它不起作用的原因是这导致指令具有自己的隔离范围,该范围不与 ng-repeat<共享/code> ,因此您无权访问克隆范围内的变量.
I'm thinking this should be simple but I'm missing something. How can I pass a flowObj
in my ng-repeat
below to my directive? I want to pass it to my directive then, on click, use that FlowObj
, then apply some logic. I tried using the commented code in my directive
scope: {
test:"@"
}
But it seems to screw up my CSS.
HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="center_outer">
<div id="center_inner" ng-controller="CtrlPageFlow">
<div flowclick class="cflow" ng-repeat="flowObj in flows">
{{flowObj.name}}
</div>
</div>
</div>
</body>
</html>
Here is my directive
angular.module('directives', ['opsimut']).directive('flowclick', function() {
return {
/*
scope: {
test:"@" // set the attribute name on the directive's scope
},
*/
link: function(scope, elem, attr) {
elem.bind('click', function(scope) {
debugger;
alert(scope.flowObj);
//scope.name += '!';
//scope.$apply();
});
}
};
});
SOLUTION BASED ON ANSWER:
angular.module('directives', ['opsimut']).
directive('flowclick', function() {
return {
link: function(e, elem, attr) {
// scope is the directive's scope,
// elem is a jquery lite (or jquery full) object for the directive root element.
// attr is a dictionary of attributes on the directive element.
elem.bind('click', function(e1) {
debugger;
alert(e.flowObj);
}, e);
}
};
});
SOLUTION: Remove the whole scope
property from your directive and everything should work as expected.
ALSO:
You'll need to rename the scope
argument from this line:
elem.bind('click', function(scope) {
to something like:
elem.bind('click', function(e) {
because you are overwriting access to scope
in your event handler by using the same name.
EXPLANATION:
The ng-repeat
directive causes each of its clones to have their own new scope. Since directives on an element share scope by default, any other directives placed alongside the ng-repeat
share its scope and have access to the current iteration's $scope
variables. In other words, your custom directive already shares scope with ng-repeat
and has access to flowObj
by default.
The reason it didn't work when specifying a scope
property on your custom directive is that this caused the directive to have its own isolate scope which did not share with ng-repeat
and so you did not have access to variables on the clones' scopes.
这篇关于AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!