javascript - AngularJS ngRequired 自定义指令
问题描述
我有一个小指令将required
类添加到表单元素的最近标签。它适用于 attribute required
,但使用ng-required
时似乎没有将指令绑定到元素。
如何在ng-required
更改时动态触发指令绑定?
注意如果可能的话,我不想向 HTML 添加任何额外的标记,以拥有一个全局指令
var app = angular.module('app',[]);
app.controller('myController',function ($scope) {
$scope.isRequired = false;
$scope.$watch('isRequired', function () {
angular.element('#html').text(angular.element('#required-element').html());
})
});
app.directive('required', function () {
return {
restrict: 'A',
link: function ($scope, $elem) {
console.log('Linking');
label = $elem.closest('.input-container').find('label');
if (label.length) {
label.addClass('required');
}
}
};
});
.required:before {
content: '*';
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app"ng-controller="myController">
<div class="input-container">
<label>Label</label>
<input type="text" required/>
</div>
<div id="required-element" class="input-container">
<label>Label Dynamic</label>
<input type="text" ng-required="isRequired == true"/>
</div>
<label><input type="checkbox" ng-model="isRequired"/> Make required: {{isRequired | json}}</label>
<hr/>
<span id="html"></span>
</div>
解决方案
正如@PetrAveryanov 在评论中指出的那样,可以$observe
在指令中使用属性来跟踪它的变化。
不过,我们似乎需要 2 个指令。一种用于静态required
,一种用于观察ngRequired
添加的属性
angular
.module('app', [])
.controller('myController',function ($scope) {
$scope.isRequired = false;
$scope.$watch('isRequired', function () {
angular.element('#html').text(angular.element('#required-element').html());
});
})
.factory('requiredLabelFactory', function () {
toggleLabel = function ($elem, labelState) {
label = $elem.closest('.input-container').find('label');
if (label.length) {
label.toggleClass('required', labelState);
}
};
return {
toggleLabel: toggleLabel
};
})
.directive('required', function (requiredLabelFactory) {
return {
restrict: 'A',
link: function ($scope, $elem) {
requiredLabelFactory.toggleLabel($elem, true);
}
}
})
.directive('ngRequired', function (requiredLabelFactory) {
return {
restrict: 'A',
link: function ($scope, $elem, attr) {
attr.$observe('required', function(newVal) {
requiredLabelFactory.toggleLabel($elem, newVal);
});
}
};
});
.required:before {
content: '*';
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app"ng-controller="myController">
<div class="input-container">
<label>Label</label>
<input type="text" required/>
</div>
<div id="required-element" class="input-container">
<label>Label Dynamic</label>
<input type="text" ng-required="isRequired == true"/>
</div>
<label><input type="checkbox" ng-model="isRequired"/> Make required: {{isRequired | json}}</label>
<hr/>
<span id="html"></span>
</div>
推荐阅读
- amazon-web-services - docker-machine create 命令出现“指定的区域无效”错误
- angular - 如何使用角度将一个组件的值共享到另一个组件
- android - 未来函数构建器之后的代码未执行
- macros - 气流默认变量 - 增量负载设置
- javascript - React:如何将数据传递给孩子
- javascript - 用对象反应减速器更新问题
- python - 按时间段的python数据框内部连接
- c# - MS Access 链接到 Sharepoint 列表添加新行而不是更新
- javascript - 使用 Luxon 中的特定格式将字符串格式化为日期时间
- mysql - 从表中为 payment_id 选择 'FAILURE' 状态记录,这些记录在 5 分钟内没有任何 'SUCCESS' 状态更新