Angularjs视图未更新，单击按钮时查看闪烁
[英]Angularjs View Not Updating, View Flickers on Button Click
问题描述
我已经编写了以下HTML和AngularJS代码，以在单击按钮时更新HTML页面（视图）上的树。
单击“按钮”后，更改将显示一秒钟，然后消失。 我找不到原因。 您能告诉我如何解决这个问题吗？
以下是HTML和JS代码。 这在代码段编辑器中有效，但在浏览器中无效。
var module = angular.module('myapp', []); module.controller("TreeCtrl", function($scope) { $scope.categories = []; $scope.$apply($scope.addTreeToView = function() { $scope.categories = [{ title: 'Computers1', categories: [{ title: 'Laptops1', categories: [{ title: 'Ultrabooks1' }, { title: 'Macbooks1' }] }, { title: 'Desktops1' }, { title: 'Tablets1', categories: [{ title: 'Apple1' }, { title: 'Android1' }] }] }, { title: 'Printers1', categories: [{ title: 'HP1' }, { title: 'IBM1' }] }]; }); });
<!DOCTYPE html> <html lang="en"> <head> <title>Tree Example</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <div class="col-sm-10 col-sm-offset-1" ng-controller="TreeCtrl"> <form action="#" method="post" class="form-horizontal" id="commentForm" role="form"> <div class="form-group" id="div_submitComment"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-success btn-circle text-uppercase" type="submit" ng-click="addTreeToView()"><span class="glyphicon glyphicon-send" id="qazwsx"></span> Create Tree</button> </div> </div> </form> <div class="page-header"> <h3 class="reviews">Tree</h3> </div> <script type="text/ng-template" id="categoryTree"> {{ category.title }} <ul ng-if="category.categories"> <li ng-repeat="category in category.categories" ng-include="'categoryTree'"> </li> </ul> </script> <ul> <li ng-repeat="category in categories" ng-include="'categoryTree'"></li> </ul> </div> </div> <script src="self.js"></script> </body>
3 个解决方案
解决方案1
2 已采纳 2015-05-07 17:20:49
尝试从底部删除type =“ submit”
解决方案2
1 2015-05-08 01:27:17
我正在使用Bootstrap的Form元素类型。 这具有动作属性。 我删除了动作属性。 删除代码后工作正常
< form method = "post" class = "form-horizontal" id = "commentForm" role = "form" > < div class = "form-group" id = "div_submitComment" > < div class = "col-sm-offset-2 col-sm-10" > < button class = "btn btn-success btn-circle text-uppercase" type = "submit" ng - click = "addTreeToView()" > < span class = "glyphicon glyphicon-send" id = "qazwsx" > < /span> Create Tree</button > < /div> </div > < /form>
解决方案3
1 2015-05-08 02:57:30
因为执行“提交”操作后将重新加载html。因此，您必须将“ type =“ submit”替换为type =” button“，并禁用“自动提交”。
按钮单击时更新角度视图模型
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.