ngModel 使用包含时未正确绑定：'element'

Question

我正在使用一种将表单输入包装在包装器周围的方法，并且发现我的ng-models在这样做时停止工作。

我创建了一个概述我所采取的方法的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>

引导表单非常冗长，我倾向于一遍又一遍地使用相同的样式。

这样我就可以开发可重用的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);
      });
    }
  }
});

你的活塞叉

Answer 2

用transclude: true代替transclude: 'element'

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