编译动态内容-AngularJS
我正在重新编写这个问题，因为我认为原文不太清楚。
基本上，我有一个“wrapper”指令，在该指令中，我试图动态地将属性添加到一个已包装（转包）的元素中。我可以让它工作，但Angular似乎不知道一旦添加了新属性。
如果我使用$compile，Angular确实可以识别它们——但代价是加倍编译转置的内容，在这种情况下，它会加倍select标记中的选项数。
下面是一个plunker，它显示了（带有注释）我正在尝试的内容，下面是相同的代码，供那些只需查看代码并给出答案的人使用：（注意-我的最终目的是检查自定义指令有效表单组中的required属性，如果发现该属性可应用于所包含的标记，请选择）
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除非编译否则无法识别它这一事实。
欢迎提供任何帮助或意见-我有点失望，因为我无法让它工作，所以也许我缺少一些基本的东西。。。
柱塞应该有助于想象我的问题。
编辑-为延迟回复答案和评论道歉。正如下面一两个评论中提到的，个人问题使我无法抽出时间进行调查。
共有3个答案
我想在这里建议一种不同的方法，我适应了动态验证。动态地向字段添加验证，减少了每个字段的样板html代码，我为类似的目的编写了一个指令。扑克
我为所有类型的字段编写了这样的指令：数字、文本、选择、文本区域、bool、日期选择器等...附加的柱塞器为您提供了文本的示例
使用下面的线条实现角度的魔力：
var newElem = angular.element(template);
element.replaceWith(newElem);
$compile(newElem)(scope);
所有其他代码都只是一些逻辑if-else部分。。
我只能猜测您看到的是指令初始化过程中双重编译的结果，这就是为什么您会看到双重选项集。
您可以通过在$timeout内包装编译来解决这个问题，这将确保编译在指令初始化之外进行。这是一个工作演示，下面是指令代码：
.directive('validFormGroup', function($compile, $timeout) {
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'));
$timeout(function(){
selectElement.attr('ng-required', true);
$compile(selectElement)(scope);
});
}
}
};
});
PS您可以通过在指令上使用隔离作用域，然后检查转置的输入/选择元素是否具有所需的属性集，来实现类似的引导包装功能。在隔离作用域上定义一个函数以检查错误，并将此函数绑定到表单组ng class has error。这样，您根本不必使用$timeout。
尝试以下简单指令：
.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>
演示
解释：
>
这里我处理的是compile函数，而不是link函数。
-
主要内容：1.概述,2.Compiler,3.AdaptiveCompiler,4.AbstractCompiler,5. JavassistCompiler1.概述 在 Java 语言中，大多数情况下，我们已经编写好 Java 类，并编译成 Class 文件进行运行。但是在一些场景下，例如动态代理，需要运用到动态编译的技术 例如，SPI中的 createAdaptiveExtensionClassCode方法中，我们可以看到如下代码： 调用 Compiler#compile(code, cla
-
主要内容：1. 配置Apache以允许CGI,2. 编写CGI程序CGI(公共网关接口)定义了Web服务器与外部内容生成程序交互的方式，这些程序通常被称为CGI程序或CGI脚本。这是一种使用您最熟悉的编程语言将动态内容放在网站上的简单方法。本文档将介绍如何在Apache Web服务器上设置CGI，以及如何编写简单的CGI程序。 1. 配置Apache以允许CGI 为了使CGI程序正常工作，需要配置Apache以允许CGI执行。有几种方法可以做到这一点。 方式1：
-
我使用的是这个官方组件https://www.tiny.cloud/docs/integrations/react/ 我想在文档https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent中使用这个方法，以便将bbcode定义为编辑器的内容。 这是我的代码
-
问题内容： 我一直在环顾四周，无法看到任何快速相关的方法来执行此操作。我试图让我的UIWebViews高度是动态的。我有一个UIWebView，它使用loadHtmlString函数加载数据。事实是，每次我加载具有不同长度的不同字符串时，都会从sqlite数据库加载数据，并且Web视图自然会获得不同的高度。 现在，我需要知道如何将UIWebView设置为正确的高度，以便将我的下一个内容加载到web
-
我有一个页面，需要动态创建一个iframe并将其粘贴到页面上的div中。我创建iframe的方式如下： 根据某些条件，我需要：A）将iframe src设置为其他页面，或者B）动态地向iframe添加一些HTML。 我有选项A的罚款，但选项B抛出了安全错误： 在尝试设置HTML之前，是否需要在动态iframe上设置？我怎么会那么做呢？有没有更简单的方法将动态内容附加到动态iframe中？ 提前道谢
-
我正在制作一个工具来动态显示运行java类的源代码。我需要一个工具来帮助我从到源代码的进行动态反编译。我知道一些反编译工具，如Jad，DJ反编译程序可以反编译一个.class文件，但我希望一个工具可以： 我需要这样的反编译工具，有人知道吗？谢谢