範圍函數調用angularjs

<!DOCTYPE html> 
<html data-ng-app="app"> 

<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
</head> 

<body data-ng-controller="SimpleController"> 
    <script> 
    var app = angular.module('app', []); 
    app.controller('SimpleController', SimpleController); 

    function SimpleController($scope) { 
     $scope.isNumberA = function(val) { 
     console.log('called'); 
     if (val == 2) return true; 
     } 
    } 
    </script> 
    <input type="checkbox" ng-model="switcher" /> 
    <h1 ng-if="isNumberA(10)">isNumber</h1> 

</body> 

</html>

在上面的代碼第一次，因爲ng-if="isNumberA(10)"isNumberA電話，但我不知道爲什麼它被調用另一個時間。檢查控制檯，它在瀏覽器中的DOM渲染器上打印兩次。之後，當我再次點擊複選框時，它調用該函數。爲什麼這個方法調用複選框點擊？我沒有叫它。這是雙向綁定嗎？而且，如果我刪除<h1 ng-if="isNumberA(10)"></h1>，它不會調用。這裏發生了什麼？範圍函數調用angularjs

來源

2016-12-24 Mr_Perfect

NG-如果消化週期運行時將評估其表達，基本上你不應該從NG-if語句做出函數調用。

DEMO

<!DOCTYPE html> 
 
<html data-ng-app="app"> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
</head> 
 
<body data-ng-controller="SimpleController"> 
 
    <script> 
 
    var app = angular.module('app', []); 
 
    app.controller('SimpleController', SimpleController); 
 
    function SimpleController($scope) { 
 
     $scope.isNumberA = function(val) { 
 
     console.log('called'); 
 
     if (val == 2) $scope.block = true; 
 
     $scope.block = false; 
 
     } 
 
    } 
 
    </script> 
 
    <input type="checkbox" ng-model="switcher" /> 
 
    <span ng-init="isNumberA(10)"></sapn> 
 
    <h1 ng-if="block">isNumber</h1> 
 
</body> 
 
</html>

來源

2016-12-24 06:26:04 Sajeetharan

請詳細說明你的答案 –

您已經使用了函數調用，而不是條件變量（ng-if）。 Angular監視每個範圍變量在視圖中使用，但是當您使用函數調用時，它不能確定哪個變量或事件會影響此函數的返回值，因此Angular會在每個摘要循環中運行此類函數。你應該在ng-init中調用該函數，並將該函數的返回值存儲在一個變量中，並在ng-if中使用該變量。

$scope.isNumberA = function(val) { 
    console.log('called'); 
    if (val == 2){ 
     $scope.showIfBlock = true; 
    } else { 
     $scope.showIfBlock = false; 
    } 
    } 


<span ng-init="isNumberA(10)"></sapn> 
<h1 ng-if="showIfBlock">isNumber</h1>

來源

2016-12-24 06:23:31

範圍函數調用angularjs

回答

相關問題