Angularjs Erstellen von Standalone Custom Direktiven

Question

Ich versuche, meine Funktionen nach Komponenten zu modularisieren & war wundernd, gibt es sowieso den Controller-Pfad nur in seinen relevanten Richtlinien enthalten?

i versucht, einen Ordner mit Struktur wie diese haben:

-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'); 

Meine benutzerdefinierte Richtlinie

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

Wie kann ich das erreichen?

Answer 1

Wie viele relative Pfade planen Sie für eine Richtlinie? Normalerweise werden Direktiven als wiederholbare Komponente mit sich wiederholenden Eigenschaften verwendet, die entweder vom übergeordneten Bereich der Direktiven oder vom isolieren Bereich abgeleitet sind (falls Sie sich dazu entscheiden).

In Ihrem Fall klingt es so, als ob Sie eine Direktive mit mehreren Eigenschaften haben könnten und abhängig von diesen Eigenschaften werden Sie x, y und z mit ihnen machen.

IMO Ich würde einen isolieren Bereich und übergeben Sie Ihre Eigenschaften durch die Direktiven Attribute als Modelle.

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

Auf diese Weise Sie Ihre Abhängigkeit von der Richtlinien übergeordneten Bereich Entkopplung und die Art und Weise verwenden, imo, sind Richtlinien gemeint verwendet werden.

Und in Ihrem HTML

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

Wo Wert alle Daten, die es in sitzt in der Stromregler ist Anwendungsbereich der.

Answer 2

möglich sein sollte.

Nennen Sie Ihren Controller (vergessen Sie nicht, um die Datei zu nennen, wo der Controller in Ihrer Datei index.html ist oder was auch immer)

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

     }; 
    }])