页面加载完成后如何再次执行AngularJS指令

请在此处检查此代码示例：

此代码示例使用指令

check if required

添加

ng required

属性。页面加载完成后，根据需要设置带有

test\me

的输入元素

现在假设在稍后的某个时刻，必填字段列表发生了更改，如何重新运行该指令以更改已成为必填字段的新字段的

ng required

属性

塔瑞克

---

更新2： 经过大量的研究和试验，我意识到这个要求是不现实的，不应该被接受。我试图解决的问题是，由于在运行时添加了验证规则，在IE11中加载HTML的速度很慢

我试图修改HTML属性/指令以添加验证，例如

ng reuqired

，然后使用

$compile

，因为AngularJS需要这样才能进行动态验证

在阅读了这里添加的解决方案和评论之后，我认为有一个更好的选择

我可以跳过HTML并使用相关HTML元素的

ngModel.NgModelController

，然后访问

$validators

以使用代码执行验证，而不是通过添加“ng required”指令来修改元素HTML。如果您阅读，您将看到我已经为变量

elmModel

中的每个元素访问了

ngModel.NgModelController

。我认为这个变量将提供对

$validators

的访问，可以使用它向元素添加验证。由于规则现在在

validationList

变量中可用，因此我将编写一个函数，通过查找此列表并动态应用可用的验证来执行验证

这将是未来sprint的改进

如果您需要此类解决方案，您可以随时关注，因为我正计划实施新提议的方法

这个帖子现在可以关闭了

塔瑞克

---

更新1： 当我回复这些评论时，解决方案在我脑海中闪现。。。所以，谢谢你们所有人迫使我思考得到解决方案

简单地说，我将在指令

中创建一个作用域函数
isFieldRequired（）
，检查是否需要。此函数将接受元素ID，如果在必填字段列表中找到元素ID，则返回true，否则返回false。此时，我可以访问元素ID，因此这里没有问题。最终，HTML的外观如下所示：

<input id="some_id" type="text" ng-required="isFieldRequired('some_id')">

要使用
检查是否需要
将其添加到任何父元素，如下所示：

<div ng-form="masterForm" check-if-required>
    <label>First Name:</label><input id="firsName" type="text"><br>
    <label>Last Name:</label><input id="lastName" type="text"><br>
    <label>Age:</label><input id="age" type="number"><br>
    <label>Address:</label><input id="address" type="text"><br>
</div>


名字：

姓氏：

年龄：

地址：


当我成功地实现上述功能时，我将添加它作为解决方案

上述解决方案的唯一缺点是，即使不相关，也会为所有字段添加
ng required
指令。这就是为什么我在寻找一种方法来重新应用指令
check if required

Tarek
根据需要创建所需的输入字段，并使用
$compile
重新编译
指令。这里有工作

在plunker中，我添加了最后一个按钮，使输入字段具有id
make\u require
to required。当有人点击该按钮时，属性将添加值
true

  <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
    <button type="button" class="btn btn-sm btn-primary" ng-click="makeRequired()">Make input Required</button>

首先，据我所知，您使用JQuery操纵DOM是毫无原因的。有时在Angular中使用JQuery是有原因的，但更常见的是，这表明您没有正确使用Angular

关于手头的问题，还不完全清楚为什么要首先使用ID。ng required是一个指令，可以将范围变量作为其参数，并在该范围变量更改时更新。要更改是否需要某些东西，只需在范围内保留几个变量，并根据您的需要进行更改

我修改了您的Plunkr，添加了一个范围变量，用于控制字段是否是必需的


（函数（角度）{
"严格使用",；
var-app=angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
app.controller（'DatepickerPopupDemoCtrl'，['$scope'，函数（$scope）{
$scope.today=函数（）{
$scope.dt=新日期（）；
$scope.dt2=新日期（）；
};
//我建议捆绑只控制ui的变量，以保持范围整洁
$scope.ui={
日期选择器：{
必填项：true
},
日期选择器2：{
必填项：false
},
格式：{
必填项：true
}
}
$scope.today（）；
$scope.clear=函数（）{
$scope.dt=null；
$scope.dt2=null；
};
$scope.inlineOptions={
customClass:getDayClass，
minDate:新日期（），
《秀周》：没错
};
$scope.dateOptions={
已禁用日期：已禁用，
年份：“yy”，
maxDate：新日期（2020年5月22日），
minDate:新日期（），
开始日期：1
};
//禁用周末选择
功能禁用（数据）{
变量日期=data.date，
mode=data.mode；
返回模式=='day'&&（date.getDay（）==0 | | date.getDay（）==6）；
}
$scope.toggleMin=function（）{
$scope.inlineOptions.minDate=$scope.inlineOptions.minDate？null:new Date（）；
$scope.dateOptions.minDate=$scope.inlineOptions.minDate；
};
$scope.toggleMin（）；
$scope.open1=函数（）{
$scope.popup1.opened=true；
};
$scope.open2=函数（）{
$scope.popup2.opened=true；
};
$scope.setDate=函数（年、月、日）{
$scope.dt=新日期（年、月、日）；
$scope.dt2=新日期（年、月、日）；
};
$scope.formats=['dd-MMMM-yyyy'，'yyyy/MM/dd'，'dd.MM.yyyy'，'shortDate']；
$scope.format=$scope.formats[0]；
$scope.altInputFormats=['M！/d！/yyyy']；
$sco
  <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
    <button type="button" class="btn btn-sm btn-primary" ng-click="makeRequired()">Make input Required</button>

  $scope.makeRequired = function() {
    $("#make_require").attr('ng-required', 'true');
    $compile(angular.element($("fieldset")))($scope)  //compile the directive again
  }