现在不是什么问题,但它让我有点好奇。
我有一个简单的指令 - 我不知道为什么 - 可以在$ 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>
更有趣的是,如果我将它与ui-router一起使用并且我放置了指令:
1)内部 ui-view :$ rootScope中无法使用该指令
2)外部 ui-view :它可以在$ rootScope中使用
因此。问题是:
1)为什么会这样?
2)这是我的错吗?我错过了什么吗? : - )
3)我可以做任何事情来省略这种行为吗?
答案 0 :(得分:1)
搞清楚了!
在我的指令定义对象&#34;范围&#34;变量未定,我的指令使用其父作用域($ rootScope)。
因此, DDO 应如下所示:
function mUserSidebarDirective() {
return {
restrict: 'A',
replace: true,
scope: true,
template: "<p>{{userSidebar.date | date : 'HH:mm'}}</p>",
controller: mUserSidebarController,
controllerAs: 'userSidebar'
};
};