Question

我正在使用一种方法将表单输入包装在包装器周围，并且发现我的ng模型在执行此操作时停止工作。

我已经创建了一个概述我所采取的方法的plunkr： http://plnkr.co/edit/AUbB4BYGrdGr7Mhx0a9c?p=preview

为什么会这样？

更新（更多详情）：

这样做的主要思想是能够通过允许语义清晰的东西快速创建Bootstrap表单。例如：

    <input ng-mode="newUser.firstName" name="firstName" first-name required></input>

把它变成这个：

    <div class="form-group has-feedback"
         ng-class="{ 'has-error': form.firstName.$invalid && !form.firstName.$pristine,
                     'has-success': form.firstName.$valid }">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="fa fa-user"></i>
            </span>
            <input class="form-control" type="text" ng-model="newUser.firstName"
                   name="firstName" placeholder="First Name" required/>
        </div>
        <span class="form-control-feedback no-label">
            <i class="fa"
               ng-class="{ 'fa-ban': form.firstName.$invalid && !form.firstName.$pristine,
                           'fa-check': form.firstName.$valid }"></i>
        </span>
    </div>

Bootstrap表单非常冗长，而且我倾向于使用相同的样式而不是。

通过这种方式，我可以开发可重用的UI表单组件，以后可以使用验证器或其他服务进行连接，以增强UI。

Answer 1

将指令的priority设置为高于ng-model（优先级：0）的指令，以确保指令先运行，从而避免确定范围问题：

demo.directive('wrapper', function () {
  return {
    restrict: 'A',
    scope: {},
    transclude: 'element',
    priority: 1,
    link: function (scope, element, attrs, ctrls, transclude) {
      var template = angular.element('<ng-transclude></ng-transclude>');
      transclude(scope.$parent, function (clone) {
        template.append(clone);
        element.after(template);
      });
    }
  }
});

Fork of your Plunker

Answer 2

使用transclude: true代替transclude: 'element'

你想用你提供的代码做什么

使用transclude时，ngModel无法正确绑定：＆＃39; element＆＃39;

2 个答案: