Question

首先，对帖子的标题感到抱歉，我找不到更好的方法来解释这个问题。

我有一个非常简单的html页面，其中包含一些显示或不显示的指令，具体取决于某些控制变量。我在小提琴here中准备了缩小版。

我想要的是： 1.仅显示搜索按钮 2.当我点击搜索时，在我进行一些I / O操作时，还会显示一条“搜索...”的注释 3.当我完成这些操作时，删除笔记'搜索...'并显示值列表以及搜索按钮。

我得到的是： 1.显示搜索按钮 2.当我点击搜索时，列表会显示按钮，没有'搜索...'，也在我完成I / O操作之前。

这是主要的html和js：

<div>
  <list ng-if="vm.isList()"></list>
  <search ng-if="vm.isSearch()"></search>
  <div ng-if="vm.isSearching()">Searching...</div>
</div>

angular
  .module("app", [])
  .controller('MyController', MyController)
  .directive('list', list)
  .directive('search', search);

function MyController() {

  var vm = this;
  var isList = false;
  var isSearch = true;
  var isSearching = false;

  vm.isList = function() {
    return isList;
  }
  vm.isSearch = function() {
    return isSearch;
  }

  vm.isSearching = function() {
    return isSearching;
  }

  vm.search = function() {
    isSearching = true;

    for (var j = 0; j < 1000; j++) {
      var total = 0;
      for (var i = 0; i < 100000; i++) {
        total += i;
      }
      console.info(j + ': ' + total);
    }

    isList = true;
    isSearching = false;
  }

}

function list() {
  return {
    restrict: 'E',
    replace: true,
    scope: true,
    template: '<ul><li>item1</li><li>item2</li><li>item3</li></ul>'
  }
}

function search() {
  return {
    restrict: 'E',
    scope: true,
    replace: true,
    template: '<button type="button" ng-click="vm.search()">search</button>'
  }
}

有什么想法吗？非常感谢。

Answer 1

您的代码没问题。您对＆＃39;操作的模仿＆＃39;不是。因为大多数时间成本操作通常是异步的。

$timeout(function() {
    isList = true;
    isSearching = false;
}, 2000);

https://jsfiddle.net/avL8g1jv/

（如果你有像(i = 0; i < 999999)这样的时间成本同步操作，则需要先设置视图变量，然后使用$timeout调用此时间 - 成本操作 - 这样，angular会更新你的html，并且在你昂贵的操作之后会跑。）

无论控制变量如何，angularjs指令都会更新

1 个答案: