在 Angular 中重新加载控制器

Question

我是 angular 的新手，我还没有找到这个问题的任何可靠答案......即使答案可能就在我面前，我就是找不到'看不到它。

我有这张html:

<ul class="wrapper" ng-controller="MyController as vks">
    <li ng-repeat="myvar in vks.vk" class="padding-left" data-myvar-id="{{myvar.id}}">
      <img src="images/someimage.svg" ng-show="{{myvar.id}} == {{myvar.chosen}}" class="some-class">
      <a class="hvr-underline-reveal">{{myvar.name}}</a>
    </li>
  </ul>

这是我的控制器：

  app.controller('MyController',  function() {

    var i = 0;
    var tmp = [];
    for (var key in someObject) {
      if (someObject.hasOwnProperty(key)) {
        var obj = someObject[key];
        if (obj.checked) {
          tmp[i] = {name: obj.name, id: obj.id, chosen: someStaticVar};
          i++;
        }
      }
    }
    this.vk = tmp;

  });

我想重点关注第一次加载页面时起作用的这部分：

<img ng-show="{{myvar.id}} == {{myvar.chosen}}">

当 {{myvar.chosen}}（由静态全局变量设置）突然从外部 javascript 发生变化时会发生什么？ HTML部分没有刷新，还是显示那个具体的，不过应该是另外一个显示的。我怎样才能只重新加载这个控制器？（或做其他事情使这项工作按预期进行？）

希望这是有道理的...

Answer 1

每当您不直接通过 AngularJS 更改变量时，您必须让 AngularJS 知道此变量已更改。这样做的方法是使用 scope.$apply() 函数。我认为 this 可以帮助您了解幕后发生的事情。

Answer 2

正如@Jodevan 所暗示的，Angular 不会意识到全局变量的变化。但是，即使它知道该更改，根据您的示例，您的视图仍然不会更新，因为绑定变量 myvar.chosen 的值没有改变。换句话说，当全局变量发生变化时，您的 for 循环不会被重新评估。

为了获得您想要的效果，您必须 (1) 知道全局变量何时发生变化，以及 (2) 更新 chosen 属性的值，以便模型实际发生变化并触发摘要。

这里 fiddle 展示了上面的代码如何工作：naive solution。希望在了解上述 2 个要求后，您可以想出一个适合您的解决方案。

在 Angular 中重新加载控制器

Reloading Controller in Angular

angularjs

angular-controller