个人中心
gpt4 book ai didi

AngularJS:使用动态属性值的自定义指令在 "ng-repeat"内不起作用

转载 作者：行者123 更新时间：2023-12-02 19:30:23 24 4
gpt4 key购买 nike

您能解释一下为什么以下指令不起作用吗？

attrs.ngMydirective 似乎在链接函数内未定义。

Live example here

HTML:

<body ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="person in people">
      {{ person.name }}
      <span ng-mydirective="{{ person.age }}"></span>  
    </li>
  </ul>
</body>

JS:

var app = angular.module('myApp', []);

app.directive('ngMydirective', function() {
  return {
    replace: true,
    link: function(scope, element, attrs) {
      if (parseInt(attrs.ngMydirective, 10) < 18) {
        element.html('child'); 
      }
    }
  };
});

app.controller('MyCtrl', function($scope) {
  $scope.people = [
    {name: 'John', age: 33},
    {name: 'Michelle', age: 5}
  ];
});

最佳答案

您应该使用 attrs.$observe 才能获得实际值。

另一种方法是将此值传递给指令的范围并$watch它。

两种方法均在此处显示 ( live example ):

var app = angular.module('myApp', []);

app.directive('ngMydirective', function() {
  return {
    replace: true,
    link: function(scope, element, attrs) {
      attrs.$observe('ngMydirective', function(value) {
        if (parseInt(value, 10) < 18) {
          element.html('child'); 
        }
      });
    }
  };
});
app.directive('ngMydirective2', function() {
  return {
    replace: true,
    scope: { ngMydirective2: '@' },
    link: function(scope, element, attrs) {
      scope.$watch('ngMydirective2', function(value) {
        console.log(value);
        if (parseInt(value, 10) < 18) {
          element.html('child'); 
        }
      });
    }
  };
});

app.controller('MyCtrl', function($scope) {
  $scope.people = [
    {name: 'John', age: 33},
    {name: 'Michelle', age: 5}
  ];
});
<body ng-controller="MyCtrl">

  <ul>
    <li ng-repeat="person in people">
      {{ person.name }}
      <span ng-mydirective="{{ person.age }}"></span>  
    </li>
    <li ng-repeat="person in people">
      {{ person.name }}
      <span ng-mydirective2="{{ person.age }}"></span>  
    </li>
  </ul>

</body>

关于AngularJS:使用动态属性值的自定义指令在 "ng-repeat"内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14559475/

24 4 0
文章推荐： .net - 用于选择 SQL Server 和获取登录详细信息的通用对话框？
文章推荐： Javascript:防止浏览器在调用服务器时卡住
文章推荐： javascript - Yii - 将 onclick 事件与 CLinkPager 与每个寻呼机链接绑定(bind)
文章推荐： sql-server - Microsoft SQL Server 2008 - 非聚集、非唯一索引上有 99% 的碎片
行者123
个人简介

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

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