Require check fails for directive as transclude content #19

sasyomaru · 2015-02-27T07:05:02Z

I'm using ng-multi-transclude in a website and find an issue on the disconnection of transclude content and the context.
For example,

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <script src="./angular.js"></script>
      <script src="./multi-transclude.js"></script>
      <script>
          angular.module('myApp', ['multi-transclude'])
                  .directive('myTemplate', function() {
                    return {
                        transclude: true,
                        template: [
                            '<div ng-multi-transclude-controller>',
                                '<h1>Some template A</h1>',
                                '<div ng-multi-transclude="some-block-a"></div>',
                                '<div ng-multi-transclude="another-block-a"></div>',
                            '</div>'].join('')
                    };
                  })
                  .directive('belowForm', function() {
                    return {
                      require: '^form',
                      template: '<div>This should be put in a form tag</div>',
                      link: function() { /* Trigger require checking */ }
                    };
                  });
      </script>
    </head>
    <body>
      <form>
          <my-template>
              <below-form name="some-block-a"></below-form>
              <below-form name="another-block-a"></below-form>
          </my-template>
          <div ng-multi-template="some-template">
              <below-form name="some-block-b"></below-form>
              <below-form name="another-block-b"></below-form>
          </div>
      </form>
      <script type="text/ng-template" id="some-template">
          <h1>Some template B</h1>
          <div ng-multi-transclude="some-block-b"></div>
          <div ng-multi-transclude="another-block-b"></div>
      </script>
    </body>
    </html>

When running the code, there will be an error "[$compile:ctreq] Controller 'form', required by directive 'belowForm', can't be found!" and the template is not filled correctly.
This is because the controller doesn't append the transclude content into its context until ctrl.transclude is called, but the link of directive happens in $transclude, which makes the content lost the context.

sasyomaru · 2015-02-27T07:10:09Z

I've created a pull request to fix this problem (#20). Hopefully it will fix the issue. Would appreciate very much if you could have a look at it.

zachsnow · 2015-02-27T14:40:07Z

Thanks @sasyomaru! I believe this is the source of various the issues with controllers others have been having.

rainboxx · 2015-03-03T17:19:57Z

We're in need of a fix for this. Is the PR #20 the way a fix should be, @zachsnow?

At least it seems to work for the issue above (which is the same we have) :).

zachsnow · 2015-03-03T21:02:34Z

@sasyomaru I played with this a little and it seems that we don't even need the hidden container, we can simply attach the transcluded content directly to the element, and then the link functions will move the content into the correct places.

@rainboxx it does indeed work, I just want to find the minimal solution possible (which this may well be).

rainboxx · 2015-03-03T22:00:27Z

@zachsnow I appreciate your investigation!

I found out that this PR will not fix all issues that we're having. Our directive using the multi-transclude also adds a form to the DOM. With a normal transclude we're able to access the form from within the transcluded content. Using the multi-transclude we cannot access that scope and therefor are unable to get our hands to the FormController.

zachsnow · 2015-03-03T22:44:02Z

@rainboxx interesting, any chance you can sketch out more precisely what you mean?

rainboxx · 2015-03-03T22:47:37Z

I can try to make a jsfiddle tomorrow, I'm about to leave for bed now (UTC+1).

zachsnow · 2015-03-03T22:53:15Z

@rainboxx thanks very much.

zachsnow · 2015-03-04T03:11:19Z

@sasyomaru I suppose we could add ng-hide during the initial transclude and then remove it when moving the individual components to the correct place if there's a worry about flashing content perhaps? It seems it should be batched though.

sasyomaru · 2015-03-06T07:53:49Z

The flashing content is also what I concerned most. But adding ng-hide may have conflict if the directive user already add ng-hide (for example, to show the template only under some condition).

zachsnow · 2015-03-06T22:31:16Z

@sasyomaru you make a good point re: ng-hide. Ok, we'll use a nested container with ng-hide and remove the container when all of its content has been moved to the right position.

zachsnow · 2015-03-07T16:17:31Z

It seems we should be able to get rid of this:

$scope.$on('$destroy', function(){
  if(toTransclude){
    toTransclude.remove();
    toTransclude = null;
  }
});

Because toTransclude stays in the DOM now, and so already be removed when the scope is destroyed, no?

zachsnow · 2015-03-07T17:25:45Z

I've updated master to include these ideas.

rainboxx · 2015-03-11T23:27:13Z

@zachsnow Sorry for the delay, kids got sick and we had to work on some different stuff first. I no longer think my issue is related to this so I opened another issue, #23. Thanks!

zachsnow closed this as completed Mar 7, 2015

rainboxx mentioned this issue Mar 11, 2015

Losing prototypical inheritance from controller scope #23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Require check fails for directive as transclude content #19

Require check fails for directive as transclude content #19

sasyomaru commented Feb 27, 2015

sasyomaru commented Feb 27, 2015

zachsnow commented Feb 27, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

zachsnow commented Mar 4, 2015

sasyomaru commented Mar 6, 2015

zachsnow commented Mar 6, 2015

zachsnow commented Mar 7, 2015

zachsnow commented Mar 7, 2015

rainboxx commented Mar 11, 2015

Require check fails for directive as transclude content #19

Require check fails for directive as transclude content #19

Comments

sasyomaru commented Feb 27, 2015

sasyomaru commented Feb 27, 2015

zachsnow commented Feb 27, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

rainboxx commented Mar 3, 2015

zachsnow commented Mar 3, 2015

zachsnow commented Mar 4, 2015

sasyomaru commented Mar 6, 2015

zachsnow commented Mar 6, 2015

zachsnow commented Mar 7, 2015

zachsnow commented Mar 7, 2015

rainboxx commented Mar 11, 2015