directive isolate scope data undefined in controller

Question

I have been writing down a module for image gallery, I have got a issue with it, my isolate scope is becoming undefined and does not change its state. I cannot understand the reason for it.

I have attached a 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);

})();

What am I doing wrong?

EDIT

Now I have added entirety of I was using inorder to curb the confusion of global variable - please see code here http://plnkr.co/edit/3SJF4AwTeL2osvdEOlmc?p=preview

I have been using it with store directive - where gallery directive consumes data from it.

Question - I accept the images are appearing perfectly, but in my console I am not able to see Array[3] , instead an undefined is printed. Check the line below Gallery Controller where I try printing vm.gallerydata from the console.

EDIT

Undefined Image:

I am able to see the images appearing in the view, but controller prints vm.gallerydata to be undefined.

Answer 1

You're passing in the data as a global variable, that won't work.

gallery_data wasn't defined on any controller nor was the directive being used in a controller context. I've added a basic controller where the data gets instantiated, I've also added the controller on the body.

<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>

Here is an updated working plunkr

Answer 2

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

Angular template does not use the javascript context in his templates.

You have to bind your data with either the $rootScope or with a $scope of a controller.

Here is the releveant plnkr : http://plnkr.co/edit/XnoUXXUOmYHPaInaQN5l?p=preview

And the relevant code :

//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>

EDIT : fix the $watch to :

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

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

directive isolate scope data undefined in controller

Question

2 answers

solution1
0 2016-05-03 06:57:08

solution2
0 2016-05-03 07:00:29

directive isolate scope data undefined in controller

Question

2 answers

solution1 0 2016-05-03 06:57:08

solution2 0 2016-05-03 07:00:29

solution1
0 2016-05-03 06:57:08

solution2
0 2016-05-03 07:00:29