在指令控制器内部更新作用域

Question

我认为我的问题将与$scope有关。我可以申请，但我不知道把它放在哪里。这也有可能与对一般概念的理解不足有关。如能澄清，不胜感激。

几个关键点，我使用的是一个browserify工作流，所以我导出了我的指令，它们在应用程序中功能齐全。

我有以下代码:

exports.gestutGallery = function() {
    return {
        scope: {
            auto: '='
        },
        controller: function($scope){
            $scope.galleryImages = [];
            $scope.totalImages = $scope.galleryImages.length-1;
            $scope.currentImageIndex = 0;
            // Ternary check to set previous image
            $scope.previousImageIndex =
                $scope.currentImageIndex - 1 >= 0 ? $scope.currentImageIndex - 1 : $scope.totalImages;
            // Ternary check to set next image
            $scope.nextImageIndex =
                $scope.currentImageIndex + 1 <= $scope.totalImages ? $scope.currentImageIndex + 1 : 0;
            //Function References
            this.addToImages = function(image, cb){
                $scope.galleryImages.push(image);
            };
            this.pushImage = function(image){
                console.log(image);
            };
            this.pushPreviousImage = function(){
                pushImage($scope.galleryImages[$scope.previousImageIndex])
            };
            this.pushNextImage = function(){
                pushImage($scope.galleryImages[$scope.nextImageIndex])
            };
        },
        restrict: 'A',
        link: function(scope, elem, attrs) {
            console.log(scope.totalImages);
        }
    };
};
exports.gestutGalleryNavigation = function() {
    return {
        scope:true,
        require: "^gestutGallery",
        link: function(scope, elem, attrs, gsGlCtrl) {
            var navElements = elem.children();
            for(var i=0; i<navElements.length; i++){
                gsGlCtrl.addToImages(navElements[i].getAttribute('data-full-size-image'));
            };
        }
    }
};

我希望能够更新totalImages, previousImageIndex, nextImageIndex等的值后，我已经从我的dom插入图像到图像数组。但这行不通。我在哪里/如何更新这些值?我试过使用$observe没有运气，我试过在循环后调用$scope.$apply()，但总是得到一个错误，摘要已经在处理中。

谢谢你帮我解释我做错了什么。

更新:

因此，经过一些进一步的研究，我决定嵌套$作用域。$watchCollection中与值相关的数字，如:

        $scope.galleryImages = [];
        $scope.currentImageIndex = 0;
        $scope.$watchCollection('galleryImages', function() {
            $scope.totalImages = $scope.galleryImages.length-1;
            // Ternary check to set previous image
            $scope.previousImageIndex =
                $scope.currentImageIndex - 1 <= 0 ? $scope.totalImages : $scope.currentImageIndex - 1;
        // Ternary check to set next image
            $scope.nextImageIndex =
                $scope.currentImageIndex + 1 <= $scope.totalImages ? $scope.currentImageIndex + 1 : 0;
        });

我觉得这可能比我想要的更昂贵，因为我认为$watch函数在每个图像插入上被调用。但是，它可以工作，并且对于用例来说它足够快。我将把这个问题留到今天剩下的时间里，看看是否有人能提出一个更优雅、更"有角度"的解决方案，否则我将接受我自己的答案。

Answer 1

可以将$scope.totalImages, $scope.previousImageIndex和$scope.nextImageIndex更改为功能:

$scope.totalImages = function(){ return $scope.galleryImages.length; };
// Ternary check to set previous image
$scope.previousImageIndex = function(){
  $scope.currentImageIndex - 1 >= 0 ? $scope.currentImageIndex - 1 : $scope.totalImages();
};
// Ternary check to set next image
$scope.nextImageIndex = function (){
  $scope.currentImageIndex + 1 <= $scope.totalImages() ? $scope.currentImageIndex + 1 : 0;
};