ng-if first working on properly call

以下代码在页面加载时调用alert()函数，即使available变量的值为null开头。这是预期的行为还是我做错了什么？ng-if first working on properly call

<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工具 - >网络选项卡可以观察问题。将有2个http调用单个图像。 1. {{available}}.jpg和2. a.jpg。但只有a.jpg电话应该已经发生

来源

2017-10-10 Ramachandran M Subramaniam

@dhilt的例子更新角度版本后的工作。但我仍然面对图像的原始问题。我更新了fiddljs链接（http://jsfiddle.net/btwymkmL/2/）。如果您查看开发人员工具中的网络活动，则无论何时在文本输入中键入内容（如'a'），都会有两个http调用。一个用于'{{available}}。jpg'和另一个用于'a.jpg'。你知道为什么会发生这种情况，还是应该创建一个新的问题？ –

我也解决了这个问题，看到更新的答案。 – dhilt

我更新了你的代码了一点，并没有问题，你在问题中描述。

工作演示：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仍然存在，您与src属性<img>标签是由浏览器处理连线。有一些方法如何避免这样的效果，最简单的一个（！但不是最好的，它只是一个想法）是控制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' 
     } 
    }); 
});

来源

2017-10-11 00:06:25 dhilt

ng-if first working on properly call

回答

相关问题