Sea*_*ean 7 html javascript angularjs
我正在重写这个问题,因为我认为原文不太清楚.
基本上,我有一个'wrapper'指令,我试图动态地将属性添加到一个包装(transcluded)元素.我可以让它工作,但Angular似乎并没有意识到添加后的新属性.
如果我使用,$compile那么Angular会识别它们 - 但是以双重编译被转换的内容为代价,在这种情况下它options会使select标记中的数量加倍.
这里是一个plunker什么我试图能证明(有评论),下同代码如下对于那些谁可以查看代码,并暗示答案只是看:(注意-我的最终目的是检查自定义指令valid-form-group的required属性,如果发现将其应用于包含的select标记)
HTML
<body ng-controller="MainCtrl">
<form name="validationForm" novalidate>
<valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>
<select ng-model="data.option" ng-options="option.id as option.message for option in selectOptions" name="validInfo" id="validInfo">
<option value="">-- Select a Question --</option>
</select>
</valid-form-group>
</form>
</body>
JS
var app = angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
$scope.selectOptions = [
{id: 1, message: 'First option'},
{id: 2, message: 'Second option'},
{id: 3, message: 'Third option'}
];
})
.directive('validFormGroup', function($compile) {
return {
restrict: 'E',
template: '<div><span ng-transclude></span></div>',
replace: true,
transclude: true,
require: '^form',
link: function(scope, element, attrs, ctrl) {
if (attrs.required !== undefined) {
var selectElement = angular.element(element.find('select'));
// either of the below produce the same results
selectElement.attr('ng-required', true);
//selectElement.attr('required', true);
// if the below is commented out it wont validate
// BUT if it is left in it will recompile and add another 3 options
$compile(selectElement)(scope);
}
}
};
});
CSS
.has-error{
border: solid 1px red;
}
请注意,这里的示例使用' required'(或ng-required)作为添加的属性来突出显示Angular不识别它的事实,除非编译.
欢迎任何帮助或评论 - 有点失望,我不能让它工作,所以也许有一些基本的我缺少...
该plunker应该有助于可视化我的问题.
编辑 - 对答复和评论的延迟表示歉意.如下面的评论或两条评论所述,个人问题使我无法找到时间进行调查.
尝试这个简单的指令：
.directive('validFormGroup', function($compile) {
return {
restrict: 'A',
replace: false,
require: '^form',
compile: function (element, attr) {
if (attr.required !== undefined) {
var selectElement = element.find('select');
// either of the below produce the same results
selectElement.attr('ng-required', true);
//selectElement.attr('required', true);
}
}
};
});
并将其用作 html 属性：
<div valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>
<select ng-model="data.option"
ng-options="option.id as option.message for option in selectOptions"
name="validInfo" id="validInfo" >
<option value="">-- Select a Question --</option>
</select>
<br/>
<br/>Required invalid? {{validationForm.validInfo.$error.required||false}}
<br/>
<br/>
</div>
解释：
我在此解决方案中根本不使用transclude该指令，因为该指令的目的只是在使用范围进行编译之前修改 html，不需要过于复杂的嵌入内容。
这里我处理compile函数而不是link函数。function 是您在链接到作用域之前compile修改 html 的好地方。
| 归档时间： |
|
| 查看次数： |
4229 次 |
| 最近记录： |