Question

以下代码在页面加载时调用alert()函数，即使available变量为空也是为了开头。这是预期的行为，还是我做错了什么？

<div ng-controller="MyCtrl">

  <input ng-model='available' type='text' />
  <div ng-if='available != null'>
    {{call()}}
    {{available == null}}
  </div>

</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.available = null;
    $scope.call = function() {
        alert(this.available == null);
    };
}

我的实际用例是仅在示波器中存在某些值时才加载图像。这是一个代码，只是模仿该功能而不涉及处理图像。

编辑：以下是示例的jsfiddle link。您可以在页面加载（或后续运行）

上看到警报弹出窗口

编辑2：将角度版本从1.0升级到1.6有助于该示例，但仍面临图像问题。更新了上面的fiddlejs链接，通过查看devleoper工具可以观察到问题 - ＆gt;网络标签。单个图像将有2个http调用。 1. {{available}}.jpg和2. a.jpg。但只应发生a.jpg来电

Answer 1

我稍微更新了你的代码，你在问题中描述没有问题。

工作演示：https://plnkr.co/edit/EBhB8ZxiivSWe7J1xtHK?p=info

<input ng-model='available' type='text' />
<div ng-if='available'>
    {{call()}}
    {{available}}
</div>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
    $scope.available = '';
    $scope.call = function() {
        alert(!!this.available);
    };  
});

UPD：我和你的演示之间的主要区别是AngularJS版本。我建议你不要使用v1.0.1。从它到1.6.x有很多改进和突破性变化。我相信，其中一个是ng-if渲染算法。使用最新稳定的！

UPD2：接下来的一点是，在控制器完成实例化之前，DOM仍然存在，并且浏览器正在处理<img>带有src属性的标记。有一些方法可以避免这种影响，最简单的方法（但不是最好的！它只是一个想法）是通过src手动控制$scope.$watch属性：

<div ng-controller="MyCtrl">
  <input ng-model='available' type='text' />
  <img id="myImg" />
</div>

app.controller('MyCtrl', function($scope) {
    $scope.available = '';
    $scope.$watch('available', function(value) {
      if(value) {
        document.getElementById('myImg').src = 
          'http://test.com/' + $scope.available + '.jpg'
      }
    });
});

ng-如果在第一次通话时无法正常工作

1 个答案: