使用 ng-include 作为父节点时，使用 jquery 禁用所有子元素的 Angular 指令不起作用

Posted 2023-02-22

【中文标题】使用 ng-include 作为父节点时，使用 jquery 禁用所有子元素的 Angular 指令不起作用

【英文标题】：Angular directive using jquery to disable all child elements does not work when using ng-include for parent node

【发布时间】：2016-08-19 22:02:30

【问题描述】：

我有一个指令，它使用 jquery 来禁用 div 中的所有子元素。因为它是一个包含很多控件的大页面，所以我使用 ng-include 来指向其他 html 标记。我遇到的问题是，在我的指令中的 jquery 应用之后，我的 div 的内容以某种方式加载。我不能将 fieldset 与 ng-disabled 一起使用，因为这个应用程序是专门为 IE 设计的，而 IE 不支持 fieldset 上的 ng-disabled（是的……我知道……可悲，但这是公司政策）。

角度指令：

app.directive('jqDisable', function() 
  var linkFunction = function(scope, element, attributes) 
      $(element).find('*').attr("disabled", true);
  ;

  return 
    link: linkFunction
  

);

html 标记：

  <div ng-include src="'schedulerOneTimeOccurence.html'" jq-disable="true">

  </div>

插件链接：http://plnkr.co/edit/jc9eCA?p=preview

谢谢

【参考方案1】：

你可以简单地移动你的指令： jq-禁用=“真” 到“schedulerOneTimeOccurence.html”。

  <div class="form-horizontal" ng-controller="ctrl" jq-disable="true" >
    <input type="text" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="" ng-required="true" />
    <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    <button ng-click="btnclick()">click</button>
  </div>

插件链接：http://plnkr.co/edit/QaCWcdnNyvnyMS2LLsbJ?p=preview

【讨论】：

在jqDisable 中创建一个console.log($(element).find('*'));。在应用指令之前，您基本上需要等待包含模板（异步任务）。解决这个问题的简单方法是，就像这个答案所说，在包含的模板中使用jq-disable。

【参考方案2】：

我认为没有理由使用 ng-incluce，为什么不使用 templateUrl

<div jq-disable="true"></div>

在你的指令中：

app.directive('jqDisable', function() 
  var linkFunction = function(scope, element, attributes) 
      $(element).find('*').attr("disabled", true);
  ;

  return 
    link: linkFunction,
    templateUrl: 'schedulerOneTimeOccurence.html'
  

);

【讨论】：

这将使指令仅适用于这个特定的容器，不推荐这样做

为什么不推荐？这就是指令的漏洞概念

该指令用于禁用容器中的元素。你想让它可重复使用。它应该对任何容器都有用。所以.. 对于那种指令，添加 templateUrl

是非常糟糕的做法