Obtenir la portée du contrôleur parent dans la directive en utilisant le contrôleur au lieu du lien

Question

J'utilise un contrôleur 'LocalCtrl' pour toutes les fonctionnalités nécessaires à la directive, mais comment puis-je obtenir la portée du contrôleur parent dans la directive et la portée de la directive vers le contrôleur.

Ma directive est intégrée dans le contrôleur parent. Je sais comment utiliser la fonction link et isoler la portée pour une liaison bidirectionnelle entre la directive et le contrôleur. Je ne suis pas sûr de savoir comment hériter de la portée du parent en utilisant la structure suivante.

<div ng-controller = "mainCtrl">
    <my-directive></my-directive>
</div>  

app.controller('mainCtrl',function ($scope) {
    $scope.mainContent = "this is main content"
});

app.controller('LocalCtrl',function () {
    var vm = this;
    vm.content = "This is Header"
});
app.directive('mydirective',function () {
    return{
        controller:'LocalCtrl as local',
        templateUrl: '<div>{{local.content}}</div>',
    }
});

Answer 1

Les directives dans Angularjs ont 3 portées, comme mentionné ci-dessous

se référer à Dans quels cas la portée de la directive angulaire est égale à celle du contrôleur ?

1 . Par défaut, scope est false, ce qui, en cas de changement de la variable scope dans votre directive, modifie également la variable scope des parents car cela ne crée pas de nouvelle scope.

 app.directive('mydirective',function () {
        return{
            controller:'LocalCtrl as local',
            templateUrl: '<div>{{local.content}}</div>',
        }
    });

2. scope:true Avec cela, il créera un nouvel objet enfant dans la directive enfant, qui hérite prototypiquement de l'objet parent ou de l'objet contrôleur des parents.

   app.directive('mydirective',function () {
       return{
           scope:true,
           controller:'LocalCtrl as local',
           templateUrl: '<div>{{local.content}}</div>',
       }
   });

3 : scope:{} : isoler la portée, qui n'hérite pas de la portée du parent (pourrait créer des composants/directives réutilisables).

voir

   <div ng-controller = "mainCtrl ">
      <my-directive content="mainContent" some-fn="someFn"></my-directive>
  </div>   

    app.directive('mydirective',function () {
        return{
            scope:{
               twoWayConent:'=content',// two way data binding
               oneWayConent:'@conent', // one way binding
               someFn:'&someFn' //function binding ( 2 way)
             },
            controller:'LocalCtrl as local',
            templateUrl: '<div>{{local.content}}</div>',
        }
    });

4. using require: Si vous avez une directive dans une autre directive, vous pouvez utiliser l'objet de définition de directive (DDO) pour accéder aux variables et aux fonctionnalités des contrôleurs de la directive parent dans votre directive enfant, comme ci-dessous.

voir

 <parent-directive>
       <child-directive></child-directive>
</parent-directive>

 app.directive('childDirective',function () {
    return{
        require:'^parentDirective' // can be array of parents directive too
        link:function(scope,element,attrs,parentDirectiveController){
               console.log(parentDirectiveController) // can access parent directive controllers instances
        }
    }
});