6

我认为这应该很简单，但我错过了一些东西。如何将下面的 a 传递给flowObj我ng-repeat的指令？我想将它传递给我的指令，然后在点击时使用它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);
    }
  };
});
4

1 回答 1

7

解决方案：scope从您的指令中删除整个属性，一切都应该按预期工作。

另外： 您需要重命名scope此行的参数：

elem.bind('click', function(scope) {

类似于：

elem.bind('click', function(e) {

因为您正在使用相同的名称覆盖事件处理程序中的访问权限scope。

解释：

该ng-repeat指令导致其每个克隆都有自己的新范围。由于默认情况下元素上的指令共享范围，因此放置在该元素旁边的任何其他指令ng-repeat共享其范围并可以访问当前迭代的$scope变量。换句话说，您的自定义指令已经与默认共享范围ng-repeat并可以访问flowObj。

在自定义指令上指定属性时它不起作用的原因scope是，这导致指令具有自己的隔离范围，该范围不共享，ng-repeat因此您无权访问克隆范围内的变量。

于 2013-05-17T23:06:59.507 回答