使用ng-bind-html分配表单？
使用ng-bind-html分配表单？
提问于 2014-06-11 05:33:14
我想单击一个按钮，将变量替换为表单。我该怎么做呢？
JavaScript
var MainCtrl = angular.module('mainCtrl', []);
MainCtrl.controller('MainCtrl', function ($scope) {
$scope.bar = 'Foo';
$scope.foo = function(){
$scope.bar = '<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>';
}
});
var fooApp = angular.module(
'fooApp', ['ngSanitize', 'mainCtrl'];
);HTML
<body ng-app='fooApp' ng-controller="MainCtrl">
<div ng-bind-html="bar"></div>
<button class="btn" ng-click="foo()">Change bar to form</button>
</body>Plnkr：http://plnkr.co/edit/TQLbVWnfF9G0LVg9tiJl
回答 1
Stack Overflow用户
发布于 2014-06-11 05:50:37
这不是一种非常有角度的方式。
一般来说，您的控制器不应该包含任何标记，也不应该直接与DOM交互。
我建议设置一个变量来确定按钮是否被单击，然后使用ngShow和ngHide有条件地显示内容或表单。
下面是一个例子：
HTML：
<body ng-app='fooApp' ng-controller="MainCtrl">
<div ng-hide="showForm">Foo</div>
<form class="form-inline" role="form" ng-show="showForm"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>
<button class="btn" ng-click="foo()">Change bar to form</button>
</body>JS：
MainCtrl.controller('MainCtrl', function ($scope) {
$scope.showForm = false;
$scope.foo = function() {
$scope.showForm = true;
}
});这是Plunker。
如果满足您的需求，请让我知道。有很多方法可以避免在你的控制器中使用标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24151209
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号