2015-07-21 4 views
0

Можно ли вводить (или, может быть, слияние будет лучшим словом) шаблон от ngRoute в шаблон в директиве?Инъекционный шаблон от ngRoute в директиве AngularJS

Поясним, например:

Существует конфиг с ngRoute

angular.module('dynamic-menu').config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('#', { 
     controller: 'MainController', 
     template: '<p>Main Page</p>' 
    }); 
    $routeProvider.when('#/productReturn/', { 
     controller: 'ProductReturnController', 
     template: '<p>Product Return Page</p>' 
    }); 
    $routeProvider.when('#/demand/', { 
     controller: 'DemandController', 
     template: '<p>Demand Page</p>' 
    }); 
}]); 

Я не знаю, что нам нужен контроллер, чтобы сделать что-н?

И директива:

angular.module('dynamic-menu').directive('menuTemplate', ['$compile', function ($compile) { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      var template = { 
       'searcher': "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\">" 
          + "<div class=\"container-fluid\">" 
           + "<div class=\"navbar-header\">" 
            + "<span class=\"navbar-brand\" > INSERT TEMPLATE HERE </span>" 
           + "</div>" 
          + "</div> <!-- /.container-fluid -->" 
         + "</nav>", 
       'main' : (...) <- not important 
      }; //var template END 

      var templateObj; 
      if (attrs.templateName) { 
       templateObj = $compile(template[attrs.templateName])(scope); 
      } 
      else { 
       templateObj = $compile(template['main'])(scope); 
      } 
      element.append(templateObj); 
     } 
    }; 
}]); 

Вот строка в директиве, где я хочу, чтобы вставить шаблон:

"<span class=\"navbar-brand\" > INSERT TEMPLATE HERE (for. ex. <p>Product Return Page</p>) </span>" 

И в HTML

<menu-template template-name="searcher"></menu-template> 

Является ли это возможным?

Или, может быть, как передать значение в контроллере в директиву без ng-view?

angular.module('dynamic-menu').controller('ProductReturnController', ['$scope', function ($scope) { 
    $scope.header = "PROOODDUUUCCCTTT REEETUUURRRNNN TTTITTTTLEEEEE"; 
}]); 

UPDATE:

У меня есть несколько страниц, для. ех. в page1 я буду использовать мой <menu-template template-name="main"></menu-template>

и page2page3page4 - внутри этих страниц, я буду использовать мой <menu-template template-name="searcher"></menu-template>

ответ

0

Если ваш маршрут состоит только из menuTemplate директивы (как это кажется), то просто включить, что Директива в шаблоне:

template: '<menu-template template-name="search">SOME TEMPLATE FOR SEARCH</menu-template>' 

Затем сделайте директиву перечеркнутым содержимое. И, нет необходимости вручную $compile (хотя вы можете) - вы можете просто определить это в шаблоне директивы:

var template = { 
    search: "<nav class='navbar'>\ 
      etc...\ 
      <div ng-transclude></div>\ 
      </nav>", 

    main: "..." 
}; 

return { 
    template: function(element, attrs){ 
    return template[attrs.templateName]; 
    }, 
    transclude: true, 
    link: function(scope, element){ 
    // whatever else (other than the template) you might need here 
    } 
} 
+0

Дело в том, - что в «поисковике» шаблон будет несколько подстраниц и каждый подстраниц будет иметь уникальный шаблон, который я хочу отключить –

+0

@karolinka, я не совсем уверен, что вы подразумеваете под «подстраницей» здесь ... отредактируйте свой вопрос с примерами того, чего вы хотите достичь. Ваш вопрос сформулирован как «как сделать X», но основой этого может быть желание достичь «Y» - давайте сосредоточимся на «Y» (см. [Вопросы XY] (http://meta.stackexchange.com/questions/ 66377/what-is-the-xy-problem)) –

+0

Я сделал обновление, возможно, теперь он будет более чистым. Посмотрите на весь код, потому что я сделал исправления практически во всех разделах «code» –

Смежные вопросы