Zugriff auf den Bereich von Link-Funktion in Direktiven AngularJs?

Question

Ich versuche, auf die Daten in einer ng-Wiederholung von der Link- oder Controller-Funktion der Direktive zuzugreifen. Mein Anweisungscode sieht so aus.

app.directive('ssLeftNavDirective', function($rootScope) { 
// Runs during compile 
    return { 
     templateUrl: 'leftnavmenu.html', 
     scope: { 
      displayMode: '=' 
     }, 
     controller: function($scope) { 
      $scope.tests = ['health check', 'Performance Monitor', 'Compare Test', 'API Helpdesk']; 
      $scope.troubleshooting = ['Trouble Shooting 1', 'Trouble Shooting 2', 'Trouble Shooting 3']; 
      $scope.help = ['Help 1', 'Help 2', 'Help 3']; 
      $scope.settings = ['Settings 1', 'Settings 2', 'Settings 3']; 
     }, 
     link: function($scope, iElm, iAttrs, controller) { 
      $scope.menuDisplayed = true; 
      $scope.tests = ['health check', 'Performance Monitor', 'Compare Test', 'API Helpdesk']; 
      $scope.troubleshooting = ['Trouble Shooting 1', 'Trouble Shooting 2', 'Trouble Shooting 3']; 
      $scope.help = ['Help 1', 'Help 2', 'Help 3']; 
      $scope.settings = ['Settings 1', 'Settings 2', 'Settings 3']; 
     } 
    }; 
}); 

Ich fügte es sowohl in Controller und Link, um es zu testen.

Und dies ist die Richtlinie Vorlage:

<div id="menudiv"> 
<nav id="leftnavmenu" ng-class="menuDisplayed ? 'navon' : 'navoff'"> 
    <a href="#" ng-repeat="nav in displayMode">{{nav}}</a> 
</nav> 
<i class="fa hamburgermenu" aria-hidden="true" 
      ng-class="menuDisplayed ? 'menuon fa-times' : 'menuoff fa-bars'" 
      ng-click="menuDisplayed = !menuDisplayed"> 
</i> 

Im Haupt HTML I der Richtlinie und Umfang Wert wie folgt ich hinzufügen.

<ss-left-nav-directive display-mode="tests"></ss-left-nav-directive> 

Warum werden keine Tests aus dem Anzeigemodusbereich übergeben? Was mache ich hier falsch?

Answer 1

Sie definieren tests an der falschen Stelle. Anstatt es in der Link-Funktion oder dem Controller der Richtlinie zu definieren, sollte es in dem Controller der Vorlage definiert werden, in der die Richtlinie verwendet wird. Also für,

<div ng-controller="AppController"> 
    <ss-left-nav-directive display-mode="tests"></ss-left-nav-directive> 
</div> 

Im AppController (oder welche auch immer Controller tests binded zu),

app.controller('AppController', function ($scope) { 
     $scope.tests = ['health check', 'Performance Monitor', 'Compare Test', 'API Helpdesk']; 
    }); 

Und die folgende Richtlinie sollte funktionieren,

app.directive('ssLeftNavDirective', function ($rootScope) { 
    // Runs during compile 
    return { 
     templateUrl: 'leftnavmenu.html', 
     scope: { 
      displayMode: '=' 
     }, 
     controller: function ($scope) { 
      $scope.menuDisplayed = true; 
     }, 
     link: function ($scope, iElm, iAttrs, controller) { 
     } 
    }; 
});