AngularJs传递HTML每个NG-重复实例指令 [英] AngularJs pass instance of each ng-repeat in HTML to directive
问题描述
我想这应该是简单的，但我失去了一些东西。我如何传递一个 flowObj 在我的 NG-重复下面我的指令？我想将它传递给我的指令，然后点击使用该 FlowObj 然后应用一些逻辑。我尝试使用评论code在我的指令
范围：{
测试：@
}
但似乎搞砸了我的CSS。
HTML
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =center_outer＆GT;
＆LT; DIV ID =center_innerNG控制器=CtrlPageFlow＆GT;
＆LT; DIV flowclick类=cflow的NG重复=flowObj在流动＆GT;
{{flowObj.name}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
下面是我的指令
angular.module（'指令'，['opsimut']）。指令（flowclick'，函数（）{
返回{
/ *
范围： {
测试：@//设置属性名称指令的适用范围
}，
* /
链接：功能（范围，ELEM，ATTR）{
elem.bind（'点击'，功能（适用范围）{
调试器;
警报（scope.flowObj）;
//scope.name + ='';
//scope.$apply（）;
}）;
}
};
}）;
解决方案根据回答：
angular.module（'指令'，['opsimut']）。
指令（flowclick'，函数（）{
返回{ 链接：功能（E，ELEM，ATTR）{
//范围指令的适用范围，
// ELEM是一个jQuery精简版（或jQuery的全）对象指令根元素。
// attr为指令元素属性的字典。
elem.bind（'点击'，功能（E1）{ 调试器; 警报（e.flowObj）;
}，E）;
}
};
}）;
解决方案：删除整个范围从你的指令，一切属性应该正常工作。
同时
你需要从该行重命名范围参数：
elem.bind（'点击'，功能（适用范围）{
喜欢的东西：
elem.bind（'点击'，功能（E）{
因为你用相同的名字覆盖访问范围在事件处理。
说明：
的 NG-重复指令导致它的每一个克隆拥有自己的新天地。由于在默认情况下一个元素份额范围的指令，其他指令放在旁边的 NG-重复分享它的范围，并获得当前迭代的 $范围变量。换句话说，您的自定义指令已经共享的范围与 NG-重复键，在默认情况下访问 flowObj 。
在指定您的自定义指令中范围属性时，它不工作的原因是，这引起了该指令有自己的分离范围而没有与<分享code> NG-重复，所以你没有访问变量对克隆的范围。
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-重复实例指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
