AngularJS ng-include on ng-click

AngularJS ng-include on ng-click

本文关键字：ng-click on ng-include AngularJS      更新时间：2023-09-26

我想找到一种方法将HTML（针对控制器进行了优化）插入警报div。但是我找不到一种方法来做到这一点...

<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>

这两个模板应该由 JS 本身或用户调用。这些模板应该进入这个div，但我不能使用innerHTML因为模板中有一些ng模型之类的东西......

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

通常我所做的是使用 ng-if/ng-show 。我不确定我是否正确理解了您的请求，所以我会写一个小例子;假设您有一个简单的登录表单：

<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>

控制器内部：

$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;
    })
}

这样，当div 为空时，您的div $scope.message为空，您只需给$scope.message一个值即可自动显示它。如果你需要一个ng-include，你可以做的最简单的事情就是在你需要的时候显示的div中使用它：

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

更新：按照我的上一个例子，如果你想为每种情况包含不同类型的消息，你可以使用多个ngIf，包括不同的模板;示例：

<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>

这样，您还可以为登录表单或其他类型的弹出窗口执行ngInclude。

更新2：与上一个示例相同，但使用另一种解决方案：

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

然后，您可以在控制器中提供指向部分的整个路径：

$scope.templatePath = 'alert.html';
相关文章：