![](/img/trans.png)
[英]angularjs Treeview using ng-include fires ng-click for all node's parents
[英]AngularJS ng-include on ng-click
我想找到一種方法將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;
})
}
這樣,當$scope.message
為空時你的div是空的,你可以自動顯示它,只給$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';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.