1

I would like to construct a single page app. When a user clicks on a particular object I would like to replace the current component on the page with another component. The code below is situated in a directive of a component and I am able to dynamically swap out whichever component I like. However when I swap my current component to <detail></detail> I would also like to pass some information to <detail></detail> so that it can manipulate this information in its controller and display this info within its template.

How would I go about doing something such as this?

var linkFunction = function (scope, element, attributes) {
  scope.$ctrl.viewDetails = function() {
    $('#page-wrapper').html($compile('<detail></detail>')(scope));
  }
};
dillib
  • 359
  • 1
  • 2
  • 11
  • I'm quite sure that there's no need to $compile here. It looks like the code falls into ['don't use Angular with jQuery' category](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). Just combine `ng-if` with `ng-click` in directive template. – Estus Flask Jul 24 '16 at 14:12

1 Answers1

0

You have typical anti-pattern. You should do it Angular way which is much simpler and straightforward: just use ngIf directive. Something like this:

<one ng-if="condition"></one>
<detail ng-if="!condition" data="$ctrl.someData"></detail>
dfsq
  • 191,768
  • 25
  • 236
  • 258