Angularjs 视图未更新，单击按钮时视图闪烁

Question

我编写了以下 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>

Answer 1

尝试从底部删除类型="submit"

Answer 2

我使用的是 Bootstrap 的表单元素类型。这有一个动作属性。我删除了 action 属性。代码删除后工作正常

       < 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>

Answer 3

因为您的 html 将在您执行 "submit" action.So 后重新加载，您必须将 "type="submit" 替换为 type="button" 并禁用"auto submit".

Angularjs 视图未更新，单击按钮时视图闪烁

Angularjs View Not Updating, View Flickers on Button Click

javascript

html

angularjs

angularjs-view