AngularJs

Question

我有以下代码示例：

angular.module('test', ['ngRoute', 'ngAnimate'])
.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'test.template.html',
            controller: 'ctrlA',
            controllerAs: 'ctrlA'
        })
        .when('/page', {
            templateUrl: 'page.template.html',
            controller: 'ctrlB',
            controllerAs: 'ctrlB'
        });
})
.controller('ctrlA', function(testfactory) {
    this.value = "a";
    this.fnc = testfactory.getAmount;

})
.controller('ctrlB', function(testfactory) {
    this.value = "b";

    this.inc = function() {
        testfactory.incAmount();
    };

})
.factory('testfactory', function(){

    var amount = 0;

    return {

        incAmount: function() {
            amount++;
        },

        getAmount: function() {
            console.log("getAmount");
            return amount;
        }

    };
})
.run();

如果我将路由从 root 更改为 /page 并返回，getAmount 函数将执行多次。我的主要目标是如果不同的控制器增加了数量，则自动从服务中获取数量值。如何防止函数的多次执行？

ctrlA的模板看起来像

{{ctrlA.fnc()}}

Answer 1

这可以通过传递对对象的引用来实现：

// testFactory

var data = {
    amount: 0
}

// ctrl, inject service, ...

this.data = factory.data

// template 

{{ctrl.data.amount}}

我写了一篇关于这个的博客post (Model pattern for AngularJS)，你会在服务和多个控制器之间自动同步数据。

AngularJs - 绑定服务函数执行多次

AngularJs - bound service function executing multiple times

factory

execution