Having trouble accessing the settings I receive from the server in my app. The directives are set up correctly and the $http is used to fetch a js file with the app settings. However, despite being able to log the scope in the console, I am unable to access the objects within the scope from the directive as it returns null.
<!DOCTYPE html>
<html ng-app="uploader">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="app/uploader.js"></script>
<style>
html, body { margin:0; padding:0; height:100%; background-color:#e3e3e3; }
</style>
</head>
<body dropzone='{"url":"app/settings.js"}'>
</body>
</html>
Contents of my app/uploader.js file
var app = angular.module("uploader", []);
app.directive('dropzone', function () {
return {
restrict: "A",
controller: function ($scope, $http) {
$scope.getSettings = function (url) {
$http.get(url).then(function (response) {
$scope.settings = response.data;
});
}
},
link: function (scope, element, attr) {
var settings = JSON.parse(attr.dropzone);
scope.getSettings(settings.url);
function handleDragEnter(e) {
}
function handleDragOver(e) {
}
function handleDrop(e) {
}
element.bind('dragenter', handleDragEnter);
element.bind('dragover', handleDragOver);
element.bind('drop', handleDrop);
console.log(scope.settings);
}
}
});