current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

What I tried to do the last days is something like that:

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

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

myform should just add some attributes to the <form>-tag, myinput should render a label, the input field and the errors when the somename-form-element is dirty and invalid. Pretty simple stuff.

As easy everything in AngularJS is, I had no chance. Had to move the ng-controller up to an extra div because nothing worked when the controller is defined in the myform tag (ng-click ignored, ...). Ugly but can live with that. No access to the scope in transcluded directives. Can be fixed with the link function and the append. Problem, the whole form validation stuff is not working when this fix is used. So I can have access to the form OR the scope.

What is the correct way to do this in AngularJS? I am really out of ideas and in despair after 4 days of trying and researching (learned the whole AngularJS in less than a day and not a single other problem).

Don't know if it makes sense to post ~ 30 different versions of trying to get this done. Maybe someone can provide a clean solution that is working and following the ideas behind the AngularJS framework (paypal beer thank you included).

Thank you very much in advance!

Anton

scope-fix-solutions: http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ Issue with transcoded directives: https://github.com/angular/angular.js/issues/5489 ... there are thousands of problems about directives and transcoding, seems to be the most ugly part in Angular. Wanted to include more links to solutions I tried, but I am only allowed to post 2.

share|improve this question
    
hi @user2899409 - thanks for contributing. You could improve your question by making the question more clear (like turning the title into an interrogative sentence: stackoverflow.com/help/how-to-ask). It is also possible to enable syntax-highlighting to make code-parts more readable (stackoverflow.com/editing-help#syntax-highlighting). –  florianb Sep 3 '14 at 13:43
    
Thank you very much, already reading your suggested help pages. –  Anton Sep 4 '14 at 7:08
    
You're welcome - have fun! :D –  florianb Sep 4 '14 at 7:11

1 Answer 1

up vote 0 down vote accepted

If somebody needs the solution (small example) - whole example on Plunker - provided by Sander Elias, many thanks!

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']);
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.