Angular benutzerdefinierte Direktive Aufruf einer anderen benutzerdefinierten Richtlinie

Question

Ich entwickle ein eckiges Framework, wo Benutzer Header, Menü, Fußzeile und ausgewählte Seiten mit benutzerdefinierten Anweisungen konfigurieren können. Um diese Anforderung zu erfüllen, brauche ich an einer Stelle folgendes. Ich habe ein Beispiel im Netz gesehen, kann es aber nicht gut erklären.

Die Anforderung ist, dass die VorlageUrl der ersten benutzerdefinierten Anweisung durch ein Vorlagenattribut ersetzt werden soll, das eine andere benutzerdefinierte Anweisung aufrufen sollte.

Der folgende Code mit templateUrl funktioniert gut.

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" 
    }; 
}); 

Allerdings, wenn ich den obigen Code wie folgt ändern. Ich mache die Änderung so, dass meine benutzerdefinierte Anweisung tmHtml eine andere benutzerdefinierte Anweisung aufruft.

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

Neue Richtlinie für Ausblendenanzeigen geschrieben wird wie folgt

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

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

}); 

Es funktioniert nicht. Ich verstehe, dass mir hier etwas fehlt. Ich konnte es nicht herausfinden. Versuchen Sie definieren Ihr Controller mit controllerAs schätzen

Answer 1

Arbeitscode:

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>" 
    }; 
}); 

das Problem ist mit der Schreibweise von templateUrl in Ihrer hideShow Richtlinie.

Demo: http://plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview

Answer 2

helfen:

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>`` 
     }; 
    }); 

muss von

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

unter dem Attribut template ersetzt werden, fügen Sie Html. So haben Sie immer noch da schlingt Fall zu verwenden, wie in der HTML-Dateien

Answer 4

Ihre erste Richtlinie kann ein eventually scoped Attribut, das Sie observe.

Dann kann es die zweite Direktive wickeln. Bei Bedarf können Ihre Anweisungen communicates als Eltern und Kinder.