Question

我一直在寻找这个，但找不到解决方案。我有一个提供程序，它只使用$ get函数返回RANDOM，并有另一个方法将RANDOM设置为数组中的随机字符串。从配置中设置RANDOM后，我可以从配置中访问其当前值，但是即使$ watch存在，控制器也不会检测到RANDOM的更改。为方便起见，我在下面附上了我的代码。

提供者：

app.provider('sets', function (){
var sets= ['gogreen', 'gored', 'tekkon', 'temple', 'comehome'];
var random = sets[Math.round(Math.random() * (sets.length - 1))];
return {
    set: function () {
        random = sets[Math.round(Math.random() * (sets.length - 1))];
    },
    take: function (){
        return random
    },
    $get: function () {
        console.log("$get: " + random);
        return {
            random
        };
    }
};
});

我正在使用这种形式的设置，以便稍后将其注入我的配置中，如下所示。注意：我正在使用UI-Router。

$stateProvider
    .state('root', {
        url : "/{name}",
        views: {
            "canvasContainer": {
                templateUrl: function (stateParams) {
                    if (angular.isDefined(stateParams.name) && stateParams.name !== 'p' && stateParams.name !== '') {
                        return 'templates/canvas/cnv.' + stateParams.name + '.html';
                    } else {
                        setsProvider.set();
                        console.log("config: " + setsProvider.$get().random);
                        return 'templates/canvas/cnv.'+setsProvider.$get().random+'.html';
                    }

                },
                controller: 'canvasController'
            }
        }
    })

我有一个重新加载当前状态的函数

$scope.refresh = function (){
    $state.reload();
};

在另一个控制器中，我有一个$ watch检测来自我的Provider的sets.random的更改。但是未正确检测到更改。

$scope.set= sets.random;
$scope.$watch(
    function(scope) {
        return sets.random;
    },
    function(newValue, oldValue) {
        console.log("New value is: " + sets.random);
        $scope.set = newValue;
    }
    );

这是我在控制台中获得的输出：

$get: gored
$get: gogreen
config: gogreen
$get: gogreen
$watch: gored
refresh(): gored
$get: temple
config: temple
$get: temple
$watch: gored
refresh(): gored
$get: tekkon
config: tekkon
$get: tekkon
$watch: gored
refresh(): gored
$get: tekkon
config: tekkon
$get: tekkon
$watch: gored
refresh(): gored
$get: gored
config: gored
$get: gored
$watch: gored

refresh（）和$ watch在两个不同的控制器中，但它们不断喷出相同的旧值。所以我的假设是控制器无法跟踪随机性。我对这一切都很陌生，任何帮助都会受到高度赞赏。

PS。我的控制器设置如下：

app.controller('canvasController', ['sets',  function(sets){
//-----Code----
}]);

Answer 1

正如Mathew所说，使用$ broadcast可能会有所帮助，但是我无法通过这种方法获得任何结果，因为它不断向我抛出不同的错误。但是我最终能够通过搞乱代码来解决这个问题，解决方案实际上非常简单。

我修改了我的提供者，如下所示：

app.provider('sets', function (){
    var sets= ['gogreen', 'gored', 'tekkon', 'temple', 'comehome'];
    var random;
    return {
        set: function () {
            random = sets[Math.round(Math.random() * (sets.length - 1))];
        },
        $get: function () {
            // console.log("$get: " + random);
            return {
                'random' : random,
                set : function () {
                    random = sets[Math.round(Math.random() * (sets.length - 1))];
                    return random;
                },
                get : function () {
                    return random;
                }
            };
        }
    };
});

stateProvider仍然如上面的问题所示。 refresh（）函数修改如下：

$scope.refresh = function (){
    sets.set();
    $state.reload();
};

最后我甚至不需要$ watch或$ broadcast。当值在提供程序中发生变化时，值会在控制器中即时更新。

我通过遵循某些逻辑和模式来解决这个问题，但不知道它为何起作用。任何解释都将被高度赞赏，为什么直接从$ get检索的对象不会自动在控制器中更新，但如果从$ get中的函数中检索到它。基本上这个区别：

set: function () {
            random = sets[Math.round(Math.random() * (sets.length - 1))];
        },
$get: function () {
        console.log("$get: " + random);
        return {
            random
        };
    }

和此：

set: function () {
            random = sets[Math.round(Math.random() * (sets.length - 1))];
        },
$get: function () {
            // console.log("$get: " + random);
            return {
                'random' : random,
                set : function () {
                    random = sets[Math.round(Math.random() * (sets.length - 1))];
                    return random;
                },
                get : function () {
                    return random;
                }
            };
        }

由于

AngularJS：在控制器中使用$ watch来获取Provider的$ get方法

1 个答案: