Ich bin ziemlich neu in Angularjs. Ich versuche zu verstehen, warum es besser ist, diese Direktive zu verwenden, als nur den Controller zu verwenden. Beide Beispiele geben den gleichen Wert aus.

Beispiel der Richtlinie:

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

Markup:

<div ng-controller="Controller">
  <div my-customer></div>
</div>

Controller Beispiel:

angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])

Markup:

<div ng-controller="Controller">
   Name: {{customer.name}} Address: {{customer.address}}     
 </div>

Vielleicht verstehe ich Richtlinien auch nicht ganz.

3
Josh 17 Aug. 2015 im 16:37

4 Antworten

Beste Antwort

Bei der Arbeit verwenden wir eine einfache Übung, um festzustellen, ob wir eine Richtlinie benötigen oder nicht. Wenn ein bestimmtes Snippet mehrmals verwendet wird, verwandeln wir es in eine Direktive.

Eine Direktive bietet auch die Möglichkeit, Ihren Vorlagen weniger Unordnung zu verleihen.

angular.module('DocsSimpleDirective', [])
    .controller('DocsController', [function() {
        this.customer = {
            name: 'Naomi',
            address: '1600 Amphitheatre'
        };
    }])
    .directive('myCustomer', function() {
        return {
            scope: true
            restrict: 'EA',
            controller: 'DocsController',
            controllerAs: 'docsCtrls',
            templateUrl: 'assets/template/my-customer.directive.html'
        };
    })
;

Würde erlauben, dass Ihre Vorlage definiert wird als:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular test</title>
</head>
<body ng-app="DocsSimpleDirective">
    <my-customer></my-customer>
</body>
</html>

Und Ihre Richtlinie als:

<article>
    <strong>{{ docsCtrls.customer.name }}</strong><br>
    {{ docsCtrls.customer.address }}
</article>

Persönlich versuche ich, $scope nicht zum Binden von Daten zu verwenden. Wenn jemand anderes anfängt, Ihren Code zu lesen, ist ein magisches customer, das in einem Controller irgendwo im Bereich definiert ist, viel schwieriger zu identifizieren als eine Variable auf einem bestimmten Controller.

Das Isolieren Ihres $ scope kann nützlich sein (indem Sie scope: true definieren), um einen Standardwert zu verwenden. Wenn Sie aufhören müssen, Ihre Anweisungen zu isolieren, sollten Sie darüber nachdenken, nicht weil dies der Standardwert ist.
Wenn Sie einen Bereich nicht isolieren, erbt er alle Werte, die in $parentScope definiert sind. Dies ist nützlich, wenn Sie Anweisungen verschachteln, bei denen alle Anweisungen wissen sollten, von welchem übergeordneten Element sie stammen. Dies birgt eine sehr ausgeprägte Gefahr. Sie könnten Daten im Elternbereich manipulieren, die nicht manipuliert werden sollten.

https://docs.angularjs.org/api/ng/type/ $ rootScope .Umfang

5
Pjetr 17 Aug. 2015 im 13:58

Andere Sache, die Sie einstellen müssen scope:true

.directive('myCustomer', function() {
  return {
    scope:true,
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

VERWEISEN SIE AUF DIESES DOKUMENT

2
Sudharsan S 17 Aug. 2015 im 13:41

Controller:

Ein Controller wird verwendet, um den Winkelbereich zu erweitern.

Wenn ein Controller über die Anweisung ng-controller an das DOM angehängt wird, instanziiert Angular mithilfe der Konstruktorfunktion des angegebenen Controllers ein neues Controller-Objekt .

Controller verwenden Folgendes:

  1. Richten Sie den Anfangszustand des $ scope-Objekts ein.

  2. Fügen Sie dem $ scope-Objekt Verhalten hinzu.

Verwenden Sie keine Controller für:

  1. DOM manipulieren - Controller sollten nur Geschäftslogik enthalten.

  2. Formatierungseingabe - Verwenden Sie stattdessen eckige Formularsteuerelemente.

  3. Filterausgang - Verwenden Sie stattdessen Winkelfilter.

  4. Code oder Status zwischen Controllern freigeben - Verwenden Sie stattdessen Winkeldienste.

Richtlinien:

Auf hoher Ebene sind Direktiven Markierungen in einem DOM-Element (z. B. ein Attribut, ein Elementname, ein Kommentar oder eine CSS-Klasse), die den HTML-Compiler von AngularJS ($ compile) anweisen, diesem DOM-Element ein bestimmtes Verhalten zuzuweisen oder sogar das DOM-Element zu transformieren und seine Kinder.

Angular enthält eine Reihe dieser integrierten Anweisungen wie ngBind, ngModel und ngClass.

Sie können Ihre eigenen Anweisungen für Angular erstellen.

Im Allgemeinen werden Anweisungen verwendet, um:

  1. vorhandenes Ding injizieren oder einwickeln.
  2. Gleiche Dinge an verschiedenen Orten wiederverwenden
  3. kann in DOM-Elemente als Attribut, Element, Kommentar oder Klasse eingefügt werden

Wenn Sie also denselben Dom oder dieselbe Logik an einem anderen Ort wiederverwenden müssen, sollten Sie die Direktive anstelle des Controllers verwenden.

Sie können auch über die innere Direktive auf das übergeordnete Controller-Objekt zugreifen

Mögen:

<div data-ng-controller="mainController">
   <p>hello world</p>
   <some-directive></some-directive> // inject directive as element
</div>
1
Shaishab Roy 17 Aug. 2015 im 14:26

Es gibt mehrere Möglichkeiten, Funktionen an Vorlagen zu binden. Einige sind besser als andere.

  1. BAD - Verwenden Sie das Attribut ng-controller direkt in der Vorlage html Binden Sie die Controller-Funktion daran

  2. BESSER - Verwenden Sie ngRoute oder ui-router, um Routen / Status oder Ihre Anwendung anzugeben. Dort können Sie controller und template pro Route / Status angeben

  3. BEST - Verwenden Sie das Definitionsobjekt directive, in dem Sie erneut controller und template angeben können, um sie miteinander zu verbinden, und verwenden Sie dann die Direktive innerhalb von Vorlagen und Routen.

Das dritte Beispiel ist so flexibel, dass Sie die Direktive nur in jeder anderen Vorlage wie <div my-directive></div>, aber auch in jedem Router als Inline-Vorlage wie template: '<div my-directive></div>' verwenden können.

Der dritte Ansatz ist der beste, da er in Richtung der zukünftigen Komponenten geht (aufgrund von React, Angular 2.0 und Webcomponents). Ich habe einen Blog-Beitrag geschrieben und einen Beispiel-Github Repository veranschaulicht diese Konzepte.

2
tomastrajan 17 Aug. 2015 im 14:16