benutzerdefinierte angularjs Direktive mit Bereich und ng-Controller

Question

Ich möchte eine Direktive erstellen, die Scope-Parameter und ng-controler beide hat.

Dies ist, wie diese Richtlinie aussehen sollte:

<csm-dir name="scopeParam" ng-controller="RegisteredController"> 
    <!--Here I want to have content--> 
    {{name}} 
</csm-dir> 

I "RegistertedController" erklärt haben, irgendwo in meiner app.

angular.module('app') 
    .controller('RegisteredController', ['$scope', function ($scope) { 
     //$scope.name should be accessible here 
    }]); 

Und ich versuche Richtlinie zu erklären:

angular.module('app') 
    .directive('csmDir', [function() { 
     return { 
      restrict: 'AE', 
      replace: true, 
      transclude: true, 
      scope: { 
       name: '=' 
      }, 
      template: '<section class="layout"><ng-transclude></ng-transclude></section>', 
      link: function (scope, element, attr, ctrl, transclude) { 
       element.find('ng-transclude').replaceWith(transclude()); 
       //here I also need scope.name parameter 
      } 
     }; 
    }); 

ich Fehler:

Multiple directives [ngController, csmDir] asking for new/isolated scope on: <csm-dir name="scopeParam" ng-controller="RegisteredController"> 

Jetzt ist dieser Fehler sehr informativ, und ich bekomme es Winkel funktioniert nicht Ich möchte hier.

Ich könnte "Scope: {..}" -Parameter aus der Direktive entfernen und im Controller definieren, aber es ist nicht das, was ich brauche.

Was ich brauche, ist im Grunde zu liefern ng-Controller zu benutzerdefinierten Direktive, und dann zusätzliche Scope-Variablen für diesen Controller.

Wie kann ich das erreichen?

Answer 1

Sie müssen Ihre Anweisung mit Tag umhüllen und Controller dort setzen.

<div ng-controller="RegisteredController"> 
    <csm-dir name="scopeParam"> 
     <!--Here I want to have content--> 
     {{name}} 
    </csm-dir> 
</div> 

Es gibt keine Möglichkeit, zwei isolierte Bereiche in einem Tag zu erhalten.