'I am having an issue accessing the scope of my controller from my directive Angular
I can't get to my settings that I am getting from the server, I have my app set up and my directives are working. I am using $http to get a js file from the server that has a bunch of settings for my app the request is being sent from the controller of my directive, but I can't get to the scope when I do a console.log(scope) it shows me my scope but when I try to access the objects within my scope from the directive I just get a null value?
<!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>
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;
//console.log($scope.settings);
});
}
},
link: function (scope, element, attr) {
var settings = JSON.parse(attr.dropzone);
scope.getSettings(settings.url);
console.log(element);
console.log(attr);
console.log(scope);
function handleDragEnter(e) {
console.log(e)
//console.log(scope.settings);
}
function handleDragOver(e) {
console.log(e)
//console.log(scope.settings);
} function handleDrop(e) {
console.log(e)
//console.log(scope.settings);
}
element.bind('dragenter', handleDragEnter);
element.bind('dragover', handleDragOver);
element.bind('drop', handleDrop);
console.log(scope.settings);
}
}
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|