为什么在调用函数时多次打印 - AngularJS

Why printing multiple times on calling a function - AngularJS

本文关键字:打印 AngularJS 调用 函数 为什么      更新时间:2023-09-26

我正在从控制器范围调用一个函数,但在控制台中,值被打印了三次。为什么会这样?

<!DOCTYPE html>
<html ng-app="myModule" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03,promo04'">
<div ng-controller="PricingController" >
    {{splitArray()}}
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.controller('PricingController',['$scope', function($scope){
    $scope.priceString = $scope.priceList;
    $scope.array = [];
    $scope.splitArray= function(){
        console.log($scope.priceString);
        $scope.array = $scope.priceString.split(",");
        console.log($scope.array[0]);
        console.log($scope.array[1]);
    };
}]);
</script>
</body>
</html>

控制台输出

promo03,promo04 
promo03
promo04 
promo03,promo04 
promo03 
promo04 
promo03,promo04 
promo03
promo04 

预期输出

promo03,promo04 
promo03
promo04 

这是对 Angular 的每个摘要循环调用的。如果保持程序运行,则会有更多的日志。

为了防止它,请将您的函数调用到您的控制器中,而不是将绑定值连接到您的 html 中。

例如:

$scope.splitArray= function(){
        console.log($scope.priceString);
        $scope.array = $scope.priceString.split(",");
        console.log($scope.array[0]);
        console.log($scope.array[1]);
    };
$scope.splitArray();