AngularJS - Компилировать с помощью ng-include обходит внутренний контроллер в директиве

Question

AngularJS - Компилировать с помощью ng-include обходит внутренний контроллер в директиве

0

Я хотел бы иметь директиву с несколькими шаблонами, как в этом SO

При использовании компиляции в директиве, как в этом jsfiddle, ng-include использует внешний контроллер, а внутренний контроллер недоступен для сферы действия шаблона

пример

function someDirective(){
return {
scope:{
  ...
},

compile: function(element, attrs) {
  var type = "extended"; //default
  if(typeof attrs.type !== 'undefined')
    type = attrs.type;
  element.append('<div ng-include="\'myproj/views/templates/group/groups-' + type + '.html\'"></div>');
},
//templateUrl: 'myproj/views/templates/group/groups-sideMenu.html',
controller:function($scope, $attrs, $rootScope, UtilsSrvc){
  // ... the template won't use this controller  
 }
 }
 }

как решить эту проблему?

РЕДАКТИРОВАТЬ

После некоторого поворота что-то стало яснее. В этой скрипке (Алессандро Чифани) скрипт работает либо для Angular 1.0, Angular 1.1 и Angular 1.2

Проблемы возникают при попытке изолировать область действия: эта скрипта работает только с угловым <= 1.1, а Angular> = 1.2 не работает

Вещи меняются при добавлении пустого "templateUrl", как показано в этой скрипте: он становится совместимым со всеми версиями

???????????????

davidetrapani 26 авг. 2015, в 23:39

Источник

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

fabio_biondi · Answer 1 · 2015-08-27T07-33-00.000Z

Я бы использовал другой подход:

1) yoy может использовать службу $compile

2) вам следует избегать использования ng-include в пользу пользовательских директив.

Следуя примеру того, что я говорю:

(function () {
  'use strict';

  angular.module('myApp', [])

  .directive('user',
    function user($compile, $window) {
      return {
        scope: {
          role: '@',
          name: '@'
        },
        restrict: 'EA',

        link: function link(scope, elem) {

          var roles = {
            SUPERADMIN: '<button ng-click="doSomething()" class="btn">Do something</button>',
            STUDENT: '<div class="alert alert-success">You are a student</div>',
            OTHER: '<div>Guest users have no options</div>'
          };

          // Create HTML elements in according with the role (SUPERADMIN, STUDENT, OTHER)
          var role = roles[scope.role] || roles.OTHER;
          var html = '<div><h2>' + scope.name + '</h2>' + role + '</div>';

          // Step 1: parse HTML into DOM element
          var template = angular.element(html);
          //console.log (html);

          // Step 2: compile the template
          var linkFn = $compile(template);
          //console.log (linkFn);

          // Step 3: link the compiled template with the scope.
          var element = linkFn(scope);
          console.log (element[0]);

          // Step 4: Append to DOM (optional)
          elem.append(element);

          scope.doSomething = function doSomething() {
            $window.alert('doSomething');
          };

        }
      };
    }
  );

})();

ПРИМЕНЕНИЕ:

<user name="fabio" role="SUPERADMIN"></user>
<user name="paolo" role="STUDENT"></user>
<user name="marco"></user>

ПРИМЕЧАНИЕ. В предыдущем примере вы могли бы заменить мои шаблоны "SUPERADMIN", "STUDENT" и "OTHER" своими собственными пользовательскими директивами, то есть:,

и здесь JSBin: https://jsbin.com/mumahobuwu/edit?html,js,output