AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令
Posted
技术标签:
【中文标题】AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令【英文标题】：AngularJs pass instance of each ng-repeat in HTML to directive 【发布时间】：2013-05-13 04:29:35 【问题描述】：我认为这应该很简单，但我遗漏了一些东西。如何将下面的ng-repeat 中的flowObj 传递给我的指令？我想将它传递给我的指令，然后在点击时使用FlowObj，然后应用一些逻辑。我尝试在指令中使用注释代码
scope:
test:"@"
但它似乎搞砸了我的 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>
这是我的指令
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();
);
;
);
基于答案的解决方案：
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);
;
);
【问题讨论】：
【参考方案1】：解决方案：从您的指令中删除整个 scope 属性，一切都应该按预期工作。
另外：
您需要从该行重命名 scope 参数：
elem.bind('click', function(scope)
类似于：
elem.bind('click', function(e)
因为您在事件处理程序中使用相同的名称覆盖了对 scope 的访问权限。
解释：
ng-repeat 指令导致它的每个克隆都有自己的新范围。由于默认情况下元素上的指令共享范围，因此放置在 ng-repeat 旁边的任何其他指令共享其范围并可以访问当前迭代的 $scope 变量。换句话说，您的自定义指令已经与ng-repeat 共享范围，并且默认情况下可以访问flowObj。
在您的自定义指令上指定 scope 属性时它不起作用的原因是，这导致指令具有自己的隔离范围，该范围不与 ng-repeat 共享，因此您无权访问变量在克隆的范围内。
【讨论】：
以上是关于AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令的主要内容，如果未能解决你的问题，请参考以下文章
将每个字母定位到每个答案容器，但不要添加新的答案容器 - 使用 AngularJs 拖放