从控制器识别当前的ui视图

时间:2015-03-20 17:52:37

标签: angularjs angular-ui-router

是否有人知道控制器所在的ui视图?

我遇到的问题是两个元素(对象)数组被发送到一个状态。应该在我的每个ui-view中呈现所述数组的每个元素。呈现元素的顺序取决于对象中提供的一个键。一旦我获得了密钥的值,我就可以将视图呈现在它们所对应的位置,但是在不知道控制器正在运行的视图的名称的情况下,我无法确定顺序。

这是我将要获得的示例回复。

    "resources": [
      {
        "video":"http://url.to/some/video+on+the+server",
        "position": 1
      }, {
        "image":"http://placehold.it/600x450&text=img2",
        "position": 0 
      }
    ]

这就是我的模板:

<div class="parent"><div class="col-md-6" ui-view="left"></div></div>
<div class="parent"><div class="col-md-6" ui-view="righ"></div></div>

每个视图的内容取决于每个对象具有的位置键。这是负责此事的国家:

.state('media', {
  url: '/media',
  views: {
    'left': {
      templateUrl: '../js/media/media.tmpl.html',
      controller: 'MediaController as mediaCtrl'
    },
    'right': {
      templateUrl: '../js/media/media.tmpl.html',
      controller: 'MediaController as mediaCtrl'
    }
  }
})

2 个答案:

答案 0 :(得分:0)

您的州应该配置,

<强>代码

.state('media', {
  url: '/media',
  views: {
    '': {
      templateUrl: '../js/media/baseTemplate.html',
      controller: 'ParentController as parentCtrl'
    },
    'left@media': {
      templateUrl: '../js/media/media.tmpl.html',
      controller: 'MediaController as mediaCtrl'
    },
    'right@media': {
      templateUrl: '../js/media/media.tmpl.html',
      controller: 'MediaController as mediaCtrl'
    }
  }
})

答案 1 :(得分:0)

我最终通过创建一个基本上充当全局计数器的服务来识别每个控制器的实例。在控制器实例化时,它调用服务并返回其当前索引。每次调用时,服务都会增加一个私有变量。这就是服务最终看起来像:

(function() {
  angular.module('screenIdentifier', [])
    .factory('screenIdentifier', screenIdentifier);

      screenIdentifier.$inject = [];

      function screenIdentifier() {
      var _currentIndex = 0;

      return {
        getCurrentIndex: getCurrentIndex,
        resetIndex: resetIndex,
        assignPosition: assignPosition
      };

      function assignPosition() {
        return _currentIndex += 1;
      }
   }
})();

通过了解每个控制器的索引,我可以正确识别视图的索引。