0

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

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

画廊.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打印了一个。检查我尝试从控制台打印的Gallery Controller下面的行。vm.gallerydata

编辑

未定义的图像： 在此处输入图像描述

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

4

2 回答 2

0

您将数据作为全局变量传递，这是行不通的。

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>

这是一个更新的工作 plunkr

于 2016-05-03T06:57:08.747 回答
0

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

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

您必须将数据与控制器的 the$rootScope或 a绑定$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);
    });
于 2016-05-03T07:00:29.640 回答