指令隔离控制器中未定义的范围数据答案

【问题标题】：directive isolate scope data undefined in controller指令隔离控制器中未定义的范围数据
【发布时间】：2016-05-03 06:51:35
【问题描述】：

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

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

编辑

未定义的图像：

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

【问题讨论】：

如果您不提供完整代码，我们如何帮助您？
@Peterson 点击 plnkr 链接

标签： angularjs angularjs-directive angularjs-controller isolate-scope angularjs-view

【解决方案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

【讨论】：

【解决方案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);
    });

【讨论】：

我查看了一下，Array[3] 在我的浏览器（chrome）中打印成功，您使用什么浏览器？
并非总是如此，它偶尔会给出array[3]，尝试停止并重新运行。
我猜你的意思是$watch？这是因为你怎么写它不能工作，我编辑我的帖子来添加修复。
嘿..对不起...手表与此无关...我的问题很简单我试图将我的隔离范围接收到的对象的传入数组打印到我的控制器中，它给离开undefined，但是您是否看到图像看起来很好……这是怎么发生的？
我没有看到任何未定义的事情发生。我只看到vm.gallerydata is now undefined 与您的代码，这与$watch 相关，因为相关代码在$watch 中。我在 $watch 之外没有任何未定义的内容。现在，如果您不使用静态数据，而是使用从服务器加载的数据用于您的实际应用程序，那么在执行指令的控制器时，您将有一个 undefined 是正常的。