Alexander2016-01-25 07:16:44
Alexander, 2016-01-25 07:16:44

AngularJS: How to dynamically connect a directive?

Good day!
The essence of the problem is as follows:
Information is loaded into modal windows using AJAX. I want to send the name of the directive to the controller by clicking on an element from the list. In the modal window that is being created, I assign the value of this directive to the element class, but the window opens empty. If you pre-register the name of the directive in the class, then the window will come filled. I searched for information, everywhere it is written about $compile, but I don’t understand how to attach it. In addition, everywhere in the examples everything is written in hardcode, all html is directly in the directive, and I want all html to be in html files, and JS to be JS.
I call the function of opening the modal window:

<span data-ng-click=showWindow("taxistoTablets")>Планшеты</span>

The controller that creates the modal window. pageName - the value of the name of the directive I am passing
arm.controller("armController", function ($scope,$rootScope) {
    $scope.jqxWindowSettings = {
      maxHeight: 1000,
      maxWidth: 1000,
      minHeight: 350,
      minWidth: 350,
      height: 200,
      width: 200,
      resizable: true,
      isModal: false,
      autoOpen: false,
      collapsed: true,
      modalOpacity: 0
    // show button click handler.
    $scope.showWindow = function (pageName) {
      $rootScope.pageName = pageName;
    // Ok button click handler.
    $scope.Ok = function () {
    // cancel button click handler.
    $scope.Cancel = function () {

The directive that should be included in this case is:
arm.directive("tablets", function () {
    return {
      controller: "getInfo",
      restrict: 'CA',
      templateUrl: 'tablets/info-description.html',
      scope: {

      link: function ($scope, element, attributes) {
        $scope.formName = 'Планшеты';

The code of the modal window, the class through which the directive should be connected is substituted, but it is connected only if I write it in advance, manually. Dynamically does not want to work.
<jqx-window jqx-settings="jqxWindowSettings">
    <div data-ng-controller="armController" id="modalWindowBody">
      <div data-ng-controller="getInfo">
        <div class="{{pageName}}"></div>
      <div style="float: right; margin-top: 15px;">
        <jqx-button data-ng-click="Ok()" style="margin-right: 10px">Ok</jqx-button>
        <jqx-button data-ng-click="Cancel()">Cancel</jqx-button>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Alexander, 2016-01-29

Apparently, in my case, only the "bad option" is possible - $compile.
No matter how I tried to adapt the directive to my homeland in a different way, nothing came of it.
With the help of the official docks, I did the following:
Module declaration

var arm = angular.module("arm", ["jqwidgets"], function($compileProvider) {
  $compileProvider.directive('compile', function($compile) {
    return function(scope,element,attrs) {
          return scope.$eval(attrs.compile);
        function (value) {

In the controller that creates the jqxwindow, define the html:
$scope.showWindow = function (pageName) {
      $rootScope.html = ('<div class="' + pageName + '"></div>');

After that, the necessary directives began to be dynamically loaded in my modal window, depending on the pageName value.
I think that the above code can still be combed for more beauty, I haven’t done it yet and I don’t really understand how it works .. But it works :)

Nicholas, 2016-01-25

first (correct) option: Use the standard angular routing mechanisms to load such templates. Then there will be no problem.
second (bad) option: use the $compile
service third (something in between the first and second): use ng-include .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question