Recently, I attempted to incorporate a factory into an existing directive. As the feature is still in progress and my experience with Angular is limited but my knowledge of JavaScript is strong, I encountered some challenges. While everything seemed correct in terms of general JavaScript scope, both 'equipment' and 'remoteTerminalFactory' were mysteriously missing in the link function. Even after adding a variable before the return statement, it too vanished once inside the function. This issue seems to be related to scope, yet I am puzzled as to what could be causing it.
'use strict';
angular.module('App')
.directive('modalRemoteTerminal', ['equipment', 'remoteTerminalFactory', function (equipment, remoteTerminalFactory) {
var test = true;
// equipment & remoteTerminalFactory exist as expected
return {
templateUrl: 'app/equipment-detail/health-tab/modal-remote-terminal/remote-terminal.html',
restrict: 'E',
link: function (scope, element, attrs) {
// test, equipment & remoteTerminalFactory are undefined
scope.modalCtrlRemoteTerminal = {};
scope.remoteTerminal = function(){
scope.modalCtrlRemoteTerminal.openModal();
};
}
};
}]);