为什么在$ rootScope中可以使用指令?

时间:2016-01-13 10:25:32

标签: javascript angularjs angularjs-directive angular-ui-router

现在不是什么问题,但它让我有点好奇。

我有一个简单的指令 - 我不知道为什么 - 可以在$ 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>
  

示例: http://jsfiddle.net/y8qgmhcw/

更有趣的是,如果我将它与ui-router一起使用并且我放置了指令:

1)内部 ui-view :$ rootScope中无法使用该指令

2)外部 ui-view :它可以在$ rootScope中使用

因此。问题是:

1)为什么会这样?

2)这是我的错吗?我错过了什么吗? : - )

3)我可以做任何事情来省略这种行为吗?

1 个答案:

答案 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'
    };
  };
  

已修复: http://jsfiddle.net/y8qgmhcw/1/