javascript AngularJS ng-include on ng-click
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22909498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-include on ng-click
提问by Akxe
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...
我想找到一种将 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>
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 innerHTMLsince in templates are some ng-models and such things...
这两个模板应该由JS本身或用户调用。这些模板应该进入这个 div，但我不能使用，innerHTML因为模板中有一些 ng-models 之类的东西......
<div id="alert" data-ng-click="empty()" data-ng-controller="alert" role="navigation"></div>
回答by Polmonite
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:
通常我所做的是使用 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>
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.messageis empty and you can show it automatically just giving $scope.messagea 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 在为空时$scope.message为空，您只需给出$scope.message一个值即可自动显示它。如果您需要一个ng-include，您可以做的最简单的事情是在需要时显示的 div 中使用它：
<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:
更新：按照我的最后一个例子，如果你想为每种情况包含不同类型的消息，你可以使用多个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>
This way you can also do an ngIncludefor a login form, or another kind of popup.
通过这种方式，您还可以为ngInclude登录表单或其他类型的弹出窗口执行操作。
UPDATE 2:same last example, but with another solution:
更新 2：与最后一个示例相同，但有另一种解决方案：
<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';
