Angularjs Angular：如何将ng hide动态添加到通过templateUrl加载的模板中？

我正试图构建一个减少文本字段样板文件的指令，在该指令中，字段可见性之类的服务器端声明可以通过模型传入

我想从templateUrl加载通用字段的HTML，根据模型转换该字段的DOM（向该模板添加各种属性和指令）

我已经将适当的ng模型绑定到嵌套的输入字段，但是当我尝试将ng隐藏应用到顶级元素时，它会显示在DOM中，但不会生效

如果工作正常，代码（到目前为止）应该隐藏字段，但事实并非如此

代码位于，复制如下：

angular.module("directives", []).

directive('tuTextField',
          function() {
            return {
              restrict: 'E',
              replace: true,
              compile: function(ele, attr) {
                    var element = jQuery(ele);
                    var input = jQuery(element.children('input')[0]);
                    // These work:
                    element.attr('id', attr.id);
                    element.attr('class', attr['class']);
                    // this fails: (I've tried element.attr() as well)
                    attr.$set('ngHide', attr.model + ".invisible['" + attr.field + "']"); 
                    // but this WORKS:
                    input.attr("ng-model", attr.model + ".fields." + attr.field);  
              }, 
              templateUrl: '/AHoLAnUg/1.css'
            };
          }).

controller('v', [ '$scope', function(scope) {
    scope.state = {
      fields: {
        name: "Tony"  
      },
      invisible: {
        name: true
      },
      readonly: {
        name: true
      },
      validations: {
        name: {
          pattern: "^[a-zA-Z]",
          message: "Must begin with a letter"
        }
      }
    };
}]);

---

您不应该操纵指令的根元素，因为

compile

函数是在

$compile

服务完成其工作后调用的，但您可以操纵子元素，因为它们将在其父元素之后编译

这是指令执行顺序的一个示例：

这就是为什么示例中的

ngHide

不会生效，而

ngModel

会生效的原因。

---

尝试用另一个模板包装您的模板，并根据需要操作它们。

您可能应该在模型上添加一个观察者，并在触发该观察者时更新属性。我只是不明白您的意思。Jsbin示例与粘贴在此处的代码不同。输入元素来自哪里？ng hide而不是ngHide？输入元素位于模板上，我将其塞进css区域，以便可以从jsbin.Ah中的URL为其提供服务。那是票。谢谢。经过更多的研究，我想使用编译服务作为后期链接步骤的一部分。这使我能够重新处理模板，以便正确工作。