Angularjs, создающий автономные пользовательские директивы

Question

Я пытаюсь модулировать свои функции компонентами & задавался вопросом, так или иначе, чтобы включить путь контроллера только в соответствующие директивы?

я пытаюсь иметь папку со структурой, как это:

-app.js 
-directives  
--slider 
---slider.js 
---slider.html 
---slider-carousel-controller.js 
---slider-single-controller.js 

app.js

//require components 
require('./directives/banner-slider/banner-slider.js'); 

Мой заказ директива

app.directive('bannerSlider', [function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: "/directives/banner-slider/banner-slider.html", 
    }; 
}]) 

Как я могу добиться этого?

Answer 1

Сколько относительных путей вы планируете иметь по одной директиве? Обычно директивы используются в качестве повторяемого компонента с повторяющимися свойствами, которые либо унаследованы от родительской области директив, либо являются областью выделения (если вы решили сделать это).

В вашем случае это похоже на то, что у вас может быть директива с несколькими свойствами и в зависимости от этих свойств вы будете делать x, y и z с ними.

IMO Я бы использовал область изоляции и передал ваши свойства с помощью атрибутов директив в качестве моделей.

app.directive('bannerSlider', [function() { 
    return { 
     scope:{ 
      property1: "=", 
      property2: "=" 
     }, 
     restrict: 'E', 
     replace: true, 
     templateUrl: "/directives/banner-slider/banner-slider.html", 
    }; 
}]) 

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

И в вашем HTML

<banner-slider property1="value" property2="value"></banner-slider> 

Где значение любые данные, это в рамках текущего контроллера он сидит.

Answer 2

Должно быть возможно.

Просто назовите ваш контроллер (не забудьте назвать файл, где ваш контроллер находится в файле index.html или любой другой)

app.directive('bannerSlider', [function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      templateUrl: "/directives/banner-slider/banner-slider.html", 
      controller: 'yourControllerName' 

     }; 
    }])