Currently, there doesn't seem to be a major issue but it has sparked my curiosity.
I have a straightforward directive that, for some unknown reason, is accessible within $rootScope.
JAVASCRIPT:
(function(){
var app = angular.module('myApp', ['m.directives']);
app.run(function($rootScope){
console.log($rootScope);
});
angular.module('m.directives', [])
.directive('mUserSidebar', mUserSidebarDirective);
function mUserSidebarDirective() {
return {
restrict: 'A',
replace: true,
template: "<p>{{userSidebar.date | date : 'HH:mm'}}</p>",
controller: mUserSidebarController,
controllerAs: 'userSidebar'
};
};
mUserSidebarController.$inject = ['$interval'];
function mUserSidebarController($interval) {
var vm = this;
vm.date = new Date();
vm.logOut = function(){
console.log('log out');
}
function refreshDate(){
$interval(function(){
vm.date = new Date();
}, 1000);
}
refreshDate();
}
})();
HTML:
<div data-ng-app="myApp">
<p style="font-weight: bold"> directive: </p>
<div data-m-user-sidebar></div>
<p style="font-weight: bold; margin-top: 50px">rootScope</p>
<div>{{$root.userSidebar}}</div>
</div>
EXAMPLE: http://jsfiddle.net/y8qgmhcw/
What's particularly intriguing is that when using it with ui-router and placing the directive:
1) Inside ui-view: The directive is not available in $rootScope
2) Outside ui-view: It is available in $rootScope
So, I have a few questions:
1) Why does this happen?
2) Am I at fault? Did I miss something? :-)
3) Is there anything I can do to prevent this behavior?