通常我会使用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() {
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'