javascript – 编译动态内容

我正在重写这个问题,因为我认为原文并不太清楚.

基本上,我有一个’wrapper’指令,我试图动态地将属性添加到一个包装(transcluded)元素.我可以让它工作,但Angular似乎并没有意识到添加后的新属性.

如果我使用$compile,那么Angular会识别它们 – 但是以双重编译被转换的内容为代价,在这种情况下它会使select标签中的选项数量翻倍.

Here is a plunker 显示(带注释)我正在尝试的内容,下面是相同的代码,对于那些可以查看代码并通过查看建议答案的人：
(注意 – 我的最终目的是检查所需属性的自定义指令valid-form-group,如果找到将其应用于包含的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>

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,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>

DEMO

说明：

>我在这个解决方案中根本没有使用transclude,因为这个指令的目的只是在用作用域编译之前修改html,不需要过于复杂的被转换内容.>这里我处理编译函数而不是链接函数.编译函数是一个很好的地方,你可以在链接到范围之前修改html.

javascript – 编译动态内容 – AngularJS

解决方法

猜你在找的JavaScript相关文章