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», нужно выполнить угловую проверку и проверить, изменилось ли значение, и HTML должен быть повторно отображен. 'ng-click' имеет смысл –

AngularJS: Функция в контроллере называется три раза

ответ

Смежные вопросы