I've hit a roadblock in finding solutions to my query.
In essence, I'm aiming to achieve dependency injection by linking my directive from the 'directives.js' file to be accessible in my controller within the 'controllers.js' file.
Even when I solely include square brackets in the module of my 'controllers.js' file,
(function () {
'use strict';
angular
.module('blogApp', ['file-directives'])
// Career Controller
.controller('CareerCtrl', function ($scope, $http, $location, $routeParams) {
$scope.getCareers = function () {
$http.get('/career').then(function (response) {
$scope.careers = response.data;
});
};
$scope.getCareer = function () {
var id = $routeParams.id;
$http.get('/career/' + id).then(function (response) {
$scope.career = response.data;
});
};
// Additional controller functions for 'CareerCtrl' omitted for brevity
})
// Lifestyle Controller
.controller('LifestyleCtrl', function ($scope, $http, $location, $routeParams) {
$scope.getLifestyles = function () {
$http.get('/lifestyle').then(function (response) {
$scope.lifestyles = response.data;
});
};
// Additional controller functions for 'LifestyleCtrl' omitted for brevity
})
// Travel Controller
.controller('TravelCtrl', function ($scope, $http, $location, $routeParams) {
$scope.getTravels = function () {
$http.get('/travel').then(function (response) {
$scope.travels = response.data;
});
};
// Additional controller functions for 'TravelCtrl' omitted for brevity
})
// Main Page Controller
.controller('MainCtrl', function ($scope, $http, $location, $routeParams) {
$scope.getCareers = function () {
$http.get('/career').then(function (response) {
$scope.careers = response.data;
});
};
// Additional controller functions for 'MainCtrl' omitted for brevity
});
}());
// Directive for file model
(function () {
'use strict';
angular
.module('file-directives', [])
.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var parsedFile = $parse(attrs.fileModel);
var parsedFileSetter = parsedFile.assign;
element.bind('change', function () {
scope.apply(function () {
parsedFileSetter(scope, element[0].files[0]);
});
});
}
};
}]);
}());
<!DOCTYPE html>
<html lang="en" ng-app="blogApp">
<!-- HTML content and Bootstrap styles - omitted for brevity -->
<footer>
<!-- Footer content omitted for brevity -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-parse-ext.js"></script>
<script type="text/javascript" src="routes/routes.js"></script>
<script type="text/javascript" src="controllers/controllers.js"></script>
<script type="text/javascript" src="directives/directives.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>Despite making adjustments in my controllers.js,
angular
.module('blogApp', ['file-directives'])
// Career Controller
.controller('CareerCtrl', function ($scope, $http, $location, $routeParams) {
$scope.getCareers = function () {
$http.get('/career').then(function (response) {
$scope.careers = response.data;
});
};
The directive setup in my directives.js should allow integration between files as expected.