Question

我正在尝试构建一个减少文本字段样板的指令，其中可以通过模型传递字段可见性等服务器端声明。

我想从templateUrl加载一般字段的HTML，根据模型转换它的DOM（将各种属性和指令添加到此模板中）。

我已经将正确的ng-model绑定到嵌套的输入字段，但是当我尝试将ng-hide应用到顶级元素时，它会显示在DOM中，但不会生效。< / p>

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

代码位于http://jsbin.com/AHoLAnUg/1/edit，现转载如下：

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"
        }
      }
    };
}]);

Answer 1

你不应该操纵指令的根元素，因为在compile服务完成其工作后调用了$compile函数，但你可以操作子元素，因为它们将在它们的父元素之后编译。 / p>

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

这就是为什么示例中的ngHide不会生效，但ngModel会生效尝试用另一个模板包装模板并根据需要操作它们。

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

1 个答案: