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

回答

相關問題