Угловая пользовательская директива, вызывающая другую настраиваемую директиву

Question

Я разрабатываю угловую структуру, где пользователь может настраивать заголовок, меню, нижний колонтитул и выбранные страницы с использованием пользовательских директив. Чтобы выполнить это требование, в какой-то момент мне нужно следующее. Я видел пример в сети, но на самом деле это не очень хорошо.

Требование состоит в том, чтобы templateUrl первой пользовательской директивы был заменен атрибутом шаблона, который должен вызвать другую настраиваемую директиву.

Следующий код с шаблономUrl отлично работает.

angular.module("app",[]); 
angular.module("app").controller("productController", ['$scope', function ($scope) { 


}]); 

angular.module("app").directive("tmHtml", function() { 
    return { 
     transclude: false, 
     scope: { 
     }, 
     controller: "productController", 
     templateUrl: "/templates/HideShow.html" 
    }; 
}); 

Однако, когда я изменю приведенный выше код, следуйте ниже. Я вношу изменения, чтобы моя настраиваемая директива tmHtml вызывала другую настраиваемую директиву.

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: ``<hideShow></hideShow>`` 
     }; 
    }); 

Новая Директива по hideShow записывается следующим образом

angular.module("app").directive("hideShow", function() { 

    return { 
     tempateUrl: "/templates/HideShow.html" 
    }; 

}); 

Это не работает. Я понимаю, что здесь что-то не хватает. Я не мог понять. Цените помочь

Answer 1

Рабочий код:

var app = angular.module('plunker', []); 

app.controller('productController', function($scope) { 

}); 

app.directive("hideShow", function() { 

    return { 
    templateUrl: "hideshow.html" 
    }; 

}); 


app.directive("tmHtml", function() { 
    return { 
    transclude: false, 
    scope: {}, 
    controller: "productController", 
    template: "<hide-show></hide-show>" 
    }; 
}); 

проблема с написанием templateUrl в вашей hideShow директиве.

Демо: http://plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview

Answer 2

Попробуйте определить контроллер с controllerAs:

angular.module("app").directive("tmHtml", function() { 
    return { 
     transclude: false, 
     scope: { 
     }, 
     controllerAs: "productController", 
     templateUrl: "/templates/HideShow.html" 
    }; 
}); 

Answer 3

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: ``<hideShow></hideShow>`` 
     }; 
    }); 

должен быть заменен

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: "<hide-show></hide-show>" 
     }; 
    }); 

под атрибутом template, добавьте HTML. Таким образом, вы все равно придется использовать змеиную случай там, как и в ваших HTML файлы

Answer 4

Ваша первая директива может иметь eventually scoped атрибут, который observe.

Тогда он может обернуть вторую директиву. При необходимости ваши директивы могут быть communicates в качестве родителей и детей.