AngularJS：在控制器中的功能被称为三次

我有一个控制器调用一个保存服务，它由于某种原因被触发三次。如果每次触发时都保存三个实例，那就不是那么好。我的解决方法是错误的吗？AngularJS：在控制器中的功能被称为三次

我发现这个以下article表示，它是在AngularJS

一种正常的行为下面是其引发行为的一个例子。我正在使用webpack捆绑AngularJS和其他依赖项。

FooCtrl

import {IFooService} from "./FooService"; 

export class FooCtrl { 

    static $inject = ["FooService"]; 

    public fooService: IFooService; 

    constructor(fooService: IFooService) { 
     console.log("creating foo controller"); 
     this.fooService = fooService; 
    } 

    public callService(): boolean { 
     console.log("call service"); 
     this.fooService.save(); 
     console.log(this.fooService.getSaves()); 
     return true; 
    } 
}

FooService接口

export interface IFooService { 
    save(): void; 
    getSaves(): number; 
} 

export class FooService implements IFooService{ 

    private saves: number = 0; 

    public save(): void { 
     console.log("saved"); 
     this.saves++; 
    } 

    public getSaves(): number { 
     return this.saves; 
    } 
}

主

namespace Main { 

    let fooModule = new FooModule.Module(); 

    let main = angular.module("myApp", [ 
     "ngRoute", 
     fooModule.getFooModule(), 
    ]); 

    main.controller("BarCtrl", function($scope) { 
     $scope.message = "Bar"; 
    }); 

    main.config(function($routeProvider: ng.route.IRouteProvider) { 
     $routeProvider.when("/", { 
      "templateUrl": "foo/index.html", 
     }); 
    }); 
}

的index.html

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="http://localhost:8080/webpack-dev-server.js"></script> 
    <script src="vendors.bundle.js"></script> 
    <script src="app.bundle.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

index.part.html

<div ng-controller="FooCtrl as ctrl"> 
    <p ng-bind="ctrl.callService()"></p> 

</div>

来源

2016-06-07 starcorn

因为你是你的绑定方法将<p>元素，这将是每一个消化周期触发，这样的角度可以检查如果值改变了。

我不确定你想要做什么，但看起来像这种方法应该由用户操作触发，或者定期使用$timeout服务来控制。

详细了解官方documentation的范围摘要循环。

来源

2016-06-07 15:47:29

它只是用于测试目的，我使用'{{}}'之前也产生了相同的错误。但我发现为了测试目的，我应该使用'ng-click'，这也适用于我的实现用例。 – starcorn

'{{}}'和ng-bind具有相同的效果，angular必须去检查值是否改变，并且HTML应该被重新渲染。 'ng-click'是有道理的 –

AngularJS：在控制器中的功能被称为三次

回答

相关问题