如何在AngularJS中实现自定义格式和输入指令（解决超越范围的问题）？

debugcn 发表于 Dev

安东

我最近几天试图做的是这样的：

%myform(name='somename' ng-controller='whatever')
  %myinput(ng-model='user.firstName' ...

  controller has a user structure with firstName, lastname, ...

myform应该只向<form>-tag添加一些属性，myinput应该渲染标签，输入字段以及somename-form-element脏和无效时的错误。很简单的东西。

AngularJS中的一切都很容易，但我没有机会。由于myform标记中定义了控制器（忽略，...），因此没有任何效果，因此不得不将其ng-controller移至另一个位置。丑陋但可以忍受。无法访问包含在伪指令中的作用域。可以用链接功能和附加功能固定。问题，使用此修复程序时，整个表单验证材料无法正常工作。这样我就可以访问表格或范围。divng-click

在AngularJS中执行此操作的正确方法是什么？经过4天的尝试和研究，我真的没有主意，感到绝望（在不到一天的时间内学习了整个AngularJS，而没有遇到其他任何问题）。

不知道发布〜30个不同版本来完成此任务是否有意义。也许有人可以提供一个干净的解决方案，该解决方案可以正常工作并遵循AngularJS框架的思想（包括贝宝啤酒，谢谢您）。

提前非常感谢您！

安东

范围修复解决方案：http : //angular-tips.com/blog/2014/03/transclusion-and-scopes/带有转码指令的问题：https : //github.com/angular/angular.js/issues/5489 ...关于指令和代码转换，有成千上万的问题，这似乎是Angular中最丑陋的部分。想要包含我尝试过的解决方案的更多链接，但只允许发布2。

安东

如果有人需要解决方案（小示例）（由Pander提供的整个示例），则由Sander Elias提供，非常感谢！

HTML：

<body ng-controller='AppController as appVm'>
   <h1>Hello angular {{appVm.version}}</h1>
   <my-form name="test">
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" ng-model='appVm.user' required placeholder="Username" name='username' ng-minlength=5>
      </div>
      <div ng-hide="test.$pristine">
         <div ng-show="test.username.$error.required" class="alert alert-danger" role="alert">this is a required field</div>
         <div ng-show="test.username.$error.minlength" class="alert alert-danger" role="alert">At least 5 chars</div>
      </div>
      <button class="btn btn-primary" ng-show='test.$touched || test.$valid'>submit</button>
   </my-form>
</body>

JavaScript：

angular.element(document).ready( function() {
  // generate module
  myModule = angular.module( 'myApp',[]);

  // define a simple controller and put the user's name into the scope
  myModule.controller('SampleController', ['$scope', function ($scope) {
    $scope.user = {
      name: 'Hugo'
    };
  }]);

  // make the form directive (just put the two attributes in the form...)
  myModule.directive('myform', function() {
      return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<form ng-attr-name="{{name}}" autocomplete="off" novalidate=true>' +
        '<fix-transclude></fix-transclude>' +
        '</form>',
      scope: {
        name: '@'
      },
      link: function (scope, elm, attr, contrl, transclFn) {
        scope.$parent[scope.name] = scope[scope.name];

        // attach the parent scope (originating one!) to the transcluded content!
        transclFn(scope.$parent,function (clone) {
          elm.find('fix-transclude').replaceWith(clone);
        });
      }
    }
  });

  // bootstrap AngularJS
  angular.bootstrap(document, ['myApp']);
});