I am currently facing an issue where I am unable to access the values stored in $scope.photoRes within my directive. When I use console.log(scope.photoRes) in the directive, it only displays an empty object. Here is the output from the console:
Object {fileName: "db372ec33603208781eb6fbf9789c816a4ab27d2.jpg", filePath: "C:\wamp\www\skittlize\photo_assets\uploads\db372ec33603208781eb6fbf9789c816a4ab27d2.jpg"} SkittlesCtrl.js:17
Object {} SkittlesCtrl.js:37
'use strict';
angular.module('skittlesApp')
.controller('SkittlesCtrl', function ($scope, $location){
$scope.photoRes = {};
$scope.dropzoneConfig = {
'options': { // passed into the Dropzone constructor
'url': 'photo_assets/save2.php'
},
'eventHandlers': {
'sending': function (file, xhr, formData) {
},
'success': function (file, response) {
$scope.$apply(function () {
$scope.photoRes = JSON.parse(file.xhr.getResponseHeader("photoInfo"));
$location.path('/uploader')
console.log($scope.photoRes);
});
}
}
};
})
.directive('dropzone', function () {
return function (scope, element, attrs) {
var config, dropzone;
config = scope[attrs.dropzone];
dropzone = new Dropzone(element[0], config.options);
_.each(config.eventHandlers, function (handler, event) {
dropzone.on(event, handler);
});
};
})
.directive('imgSwitch', ['PhotoServ', function (PhotoServ) {
function link(scope, element, attrs) {
scope.$watch('photoRes', function (newVal) {
if (newVal) {
console.log(scope.photoRes);
var cropper = new CROP();
cropper.init('.selfie-container');
cropper.loadImg('/uploads/'+scope.photoRes.fileName);
$('.cropButton').on('click', function () {
PhotoServ.skittlize('/uploads/'+scope.photoRes.fileName);
});
}
});
};
return {
link: link
}
}]);
Could this issue be occurring because changes made in the parent scope are not being registered?