AngularJS ng-include on ng-click

Question

I would like to find a way to insert HTML (which is optimalized for the controller) into alert div. However I couldn't find a way to do it...

<script type="text/ng-include" id="login.html">
       <form data-select="exeption" class="loginBox shadowed" onclick="event.stopPropagation();" novalidate name="login">
        <h2>Login alert</h2>
            <!--inputs and such, they need to be controlled by the controller-->
    </form>
</script>
<script type="text/ng-include" id="bug.html">
    <form data-select="exeption" class="bugBox shadowed" onclick="event.stopPropagation();" novalidate name="report">
        <h2>Bug report</h2>
            <!--inputs and such, they need to be controlled by the controller-->
    </form>
</script>

This two templates should be evoked by the JS itself or by user. Those templates should get into this div, but I can't use innerHTML since in templates are some ng-models and such things...

<div id="alert" data-ng-click="empty()" data-ng-controller="alert" role="navigation"></div>

Polmonite · Accepted Answer · 2014-04-08 11:15:59Z

10

Usually what I do is use ng-if / ng-show . I'm not sure I understood your request correctly, so I'll write a little example; let's say you have a simple login form:

<form>
  <label>
    username:
    <input name="username" type="text" ng-model="username"/>
  </label>
  <label>
    password:
    <input name="password" type="password" ng-model="password"/>
  </label>
  <button type="submit" ng-click="login()">login</button>
  <div class="message" ng-if="message">
  </div>
</form>

Inside the controller:

$scope.username = '';
$scope.password = '';

$scope.message = '';

$scope.login = function() {
  // login example function with ajax request and success/error promises
  myLogin($scope.username, $scope.password)
    .success(function() {
      $scope.message = 'Logged in!';
    })
    .error(function(errorMessage) {
      $scope.message = errorMessage;
    })
}

This way your div is empty when $scope.message is empty and you can show it automatically just giving $scope.message a value. If you need to have an ng-include, simplest thing you could do is to use it inside a div that you show when you need it:

<div ng-if="showMessage">
  <div ng-include="template.html"/>
</div>

UPDATE: following my last example, if you wanted to include a different type of message for every situation, you could use multiple ngIf, including different template; example:

<div ng-if="showMessage">
  <div ng-if="message.type == 'alert'" ng-include="'alert.html'"/>
  <div ng-if="message.type == 'info'" ng-include="'info.html'"/>
  <div ng-if="message.type == 'warning'" ng-include="'warning.html'"/>
  <div ng-if="message.type == 'error'" ng-include="'error.html'"/>
</div>

This way you can also do an ngInclude for a login form, or another kind of popup.

UPDATE 2: same last example, but with another solution:

<div ng-if="showMessage">
  <div ng-include="templatePath"/>
</div>

then you can give in the controller the whole path to the partial:

$scope.templatePath = 'alert.html';

edited Apr 8, 2014 at 11:15

answered Apr 7, 2014 at 10:38

Polmonite

9436 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Akxe Over a year ago

We'll the main problem is, that I would like to use the alert div for multiple situations. As shown up there, for the login & for bug reporting... and it guess there will be much more soon

Polmonite Over a year ago

Well, you could use a basic if-then structure then; I updated my answer to better explain what I mean.

Akxe Over a year ago

Well this might work, but it seems to be very strange. Doesn't angular have ability to reparse the HTML?

Polmonite Over a year ago

You can also do ng-include="template" with $scope.template = 'whole/path/to/partial.html'; I personally don't like to have template paths inside js models, as if I change a template I have to change all the controllers (unless they are inside an angular directive: in that case it's ok). Updated the answer.

Akxe Over a year ago

Those are on page templates, if it change anything... PS: Is there really a need for that if? What if I would change the templatePath to ''?

|

Collectives™ on Stack Overflow

AngularJS ng-include on ng-click

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related