个人中心
gpt4 book ai didi

javascript - AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令

转载 作者：行者123 更新时间：2023-12-03 07:57:39 25 4
gpt4 key购买 nike

我认为这应该很简单，但我错过了一些东西。我怎样才能通过 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);
    }
  };
});

最佳答案

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

另:
您需要重命名 scope这一行的论点:

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

类似于: 
elem.bind('click', function(e) {

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

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

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

关于javascript - AngularJs 将 HTML 中每个 ng-repeat 的实例传递给指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16618621/

25 4 0
文章推荐： .htaccess - 如何将 Access-Control-Allow-Origin 限制为特定路径？
文章推荐： angularjs - 动态地将 Angular2 组件附加到 dom
文章推荐： angularjs - 我可以在angularJS的$ routeProvider.when()中传递多个 Controller 吗？
文章推荐： angularjs推送对象未定义不是函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com