Название динамического NG-контроллера

Ответ 1

То, что вы хотите сделать, - это запустить другую директиву до того, как вызывается что-то еще, получить имя контроллера из какой-либо модели, удалить новую директиву и добавить директиву ng-controller, а затем повторно скомпилировать элемент.

Это выглядит так:

global.directive('dynamicCtrl', ['$compile', '$parse',function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem) {
      var name = $parse(elem.attr('dynamic-ctrl'))(scope);
      elem.removeAttr('dynamic-ctrl');
      elem.attr('ng-controller', name);
      $compile(elem)(scope);
    }
  };
}]);

Затем вы можете использовать его в своем шаблоне, например:

<div dynamic-ctrl="'blankCtrl'">{{tyler}}</div>

с таким контроллером:

global.controller('blankCtrl',['$scope',function(tyler){
    tyler.tyler = 'tyler';
    tyler.tyler = 'chameleon';
}]);

Вероятно, существует способ интерполяции значения ($interpolate) dynamic-ctrl вместо его разбора ($parse), но я не мог заставить его работать по какой-либо причине.

Ответ 2

Я использую его в ng-repeat, так что это улучшенный код для циклов и под-объектов:

Шаблон:

<div class="col-xs6 col-sm-5 col-md-4 col-lg-3" ng-repeat="box in boxes">
<div ng-include src="'/assets/js/view/box_campaign.html'" ng-dynamic-controller="box.type"></div>
</div>

Директива

mainApp.directive('ngDynamicController', ['$compile', '$parse',function($compile, $parse) {
  return {
      scope: {
          name: '=ngDynamicController'
      },
      restrict: 'A',
      terminal: true,
      priority: 100000,
      link: function(scope, elem, attrs) {
          elem.attr('ng-controller', scope.name);
          elem.removeAttr('ng-dynamic-controller');

          $compile(elem)(scope);
      }
  };
}]);

Ответ 3

Лично 2 текущих решения здесь не сработали для меня, так как имя контроллера не будет известно при первой компиляции элемента, но позже в течение другого цикла дайджеста. Поэтому я закончил использование:

myapp.directive('dynamicController', ['$controller', function($controller) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, elem, attrs) {
      attrs.$observe('dynamicController', function(name) {
        if (name) {
          elem.data('$Controller', $controller(name, {
            $scope: scope,
            $element: elem,
            $attrs: attrs
          }));
        }
      });
    }
  };
}]);