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

Question

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

角度指令：

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

感谢

Answer 1

您可以简单地移动指令：jq-disable="true"到"调度程序一次发生.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

Answer 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'
  }
});