Question

我一直在为图片库写下一个模块，我遇到了一个问题，我的隔离范围变得不确定并且不会改变它的状态。我无法理解它的原因。

我附上了 plnkr - http://plnkr.co/edit/3SJF4AwTeL2osvdEOlmc?p=preview

gallery.directive.js

(function () {

    'use strict';

    function GalleryDirective () {

        var directive = {
            link: link,
            restrict: 'E',
            replace: true,
            templateUrl: './gallery.html',
            controller: 'GalleryController',
            controllerAs: 'galc',
            bindToController: true,
            scope: {
                'gallerydata': '='
            }
        };

        return directive;

        ////////////////////////////

        function link (scope, element, attribute) {

        }
    }

    GalleryDirective.$inject = [];

    angular.module("gallery").directive("gallery", GalleryDirective);

})();

我做错了什么？

修改

现在我添加了全部用于抑制全局变量混乱的全部内容 - 请参阅此处的代码http://plnkr.co/edit/3SJF4AwTeL2osvdEOlmc?p=preview

我一直在使用store指令 - 其中gallery指令从中消耗数据。

问题 - 我接受图片完美呈现，但在我的控制台中，我无法看到Array[3]，而是打印了undefined。检查图库控制器下面的行，我尝试从控制台打印vm.gallerydata。

修改

未定义的图片：

我能够看到视图中出现的图像，但控制器打印vm.gallerydata未定义。

Answer 1

您将数据作为全局变量传递，但无法正常工作。

gallery_data没有在任何控制器上定义，也没有在控制器上下文中使用该指令。我已经添加了一个基本控制器，数据被实例化，我还在控制器上添加了控制器。

<script type="text/javascript">
        angular.module('gallery').controller('MyCtrl', function() {
          var vm = this;
          vm.gallery_data = [
                    {
                        "title": "Image 1",
                        "imageurl": "http://placehold.it/150x100"
                    },
                    {
                        "title": "Image 1",
                        "imageurl": "http://placehold.it/150x100"
                    },
                    {
                        "title": "Image 1",
                        "imageurl": "http://placehold.it/150x100"
                    }
                ]
        });
        </script>
    </head>
    <body ng-controller="MyCtrl as ctrl">
        <gallery gallerydata="ctrl.gallery_data"></gallery>
    </body>

这是an updated working plunkr

Answer 2

http://plnkr.co/edit/XnoUXXUOmYHPaInaQN5l?p=preview

Angular模板不会在他的模板中使用javascript上下文。

您必须使用$rootScope或$scope控制器绑定数据。

以下是相关的plnkr：http://plnkr.co/edit/XnoUXXUOmYHPaInaQN5l?p=preview

相关代码：

//added the definition of the controller in the module
angular.module('gallery', []).controller('mainController', ['$scope', function($scope){
  $scope. gallery_data = [
                {
                    "title": "Image 1",
                    "imageurl": "http://placehold.it/150x100"
                },
                {
                    "title": "Image 1",
                    "imageurl": "http://placehold.it/150x100"
                },
                {
                    "title": "Image 1",
                    "imageurl": "http://placehold.it/150x100"
                }
            ];

}]);
// i added the ng-controller
<body ng-controller="mainController">
    <gallery gallerydata="gallery_data"></gallery>
</body>

编辑：将$ watch修复为：

    $scope.$watch(function(){
      return vm.gallerydata;

    }, function (current, original) {
        $log.info('vm.gallerydata was %s', original);
        $log.info('vm.gallerydata is now %s', current);
    });

指令隔离范围数据在控制器中未定义

2 个答案: