2016-08-09 20 views
1

Ich habe zwei Controllern die "first-Controllers, 'zweiter Controller' und die eine Richtlinie 'executeOnEsc'.Wie verwende ich eine Direktive in mehreren Controllern?

Ich muss "teilen" diese Anweisung zwischen diesen beiden Controllern: die Richtlinie die $ scope.clear Funktion in scope 1 und ändern Sie die Variable someVar in Scope 2 nennen sollte.

Gerade jetzt, wie Sie im Code-Snippet sehen können, erzeugt die Direktive den Fehler: scope.clear ist keine Funktion.

Und das ist sinnvoll, da Richtlinie zweimal ausgeführt wird: zuerst in scope 1 und danach in Umfang 2, die nicht die hat ‚klar‘ Funktion.

Was ist die Lösung für diese Situation? Ich kann zwei verschiedene Anweisungen machen, aber das ist nicht die beste Lösung.

var app = angular.module('myApp', []); 
 

 
app.controller('first-controller', function($scope) { 
 
    $scope.value = 'Scope 1 | Press ESC Key'; 
 
    $scope.clear = function() { 
 
    $scope.value = 'Scope 1 value changed!'; 
 
    } 
 
}); 
 

 
app.controller('second-controller', function($scope) { 
 
    $scope.someVar = 'Scope 2 | Press ESC Key'; 
 
}); 
 

 
app.directive('executeOnEsc', function($document) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope) { 
 
     return $document.bind('keydown', function(event) { 
 
     if (event.which === 27) { 
 
      return scope.$apply(function() { 
 
      scope.someVar = 'Scope 2 value changed!'; 
 
      scope.clear(); 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});
.someDiv { 
 
    background-color: #2ecc71; 
 
    padding: 10px; 
 
    margin: 5px; 
 
} 
 
.second { 
 
    background-color: #3498db; 
 
    padding: 10px; 
 
    margin: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="myApp"> 
 
    <div ng-controller="first-controller"> 
 
    <div class="someDiv" execute-on-esc> 
 
     <p>{{ value }} 
 
     <p> 
 
    </div> 
 
    </div> 
 
    <div class="second" ng-controller="second-controller" execute-on-esc> 
 
    <p>{{ someVar }} 
 
     <p> 
 
    </div> 
 
</section>

+0

Die beste Lösung wäre, dem Attribut einen Callback-Handler hinzuzufügen wie 'execute-on-esc =" yourCallback "'. Dann könnten Sie den Callback in jedem Ihrer Controller wie '$ scope.yourCallback = function() {}' definieren. – str

Antwort

1

Keine Notwendigkeit 2 verschiedene Richtlinie erstellen Sie nur klare Funktion im zweiten Controller hinzufügen müssen auch

var app = angular.module('myApp', []); 
 

 
app.controller('first-controller', function($scope) { 
 
    $scope.value = 'Scope 1 | Press ESC Key'; 
 
    $scope.clear = function() { 
 
    $scope.value = 'Scope 1 value changed!'; 
 
    } 
 
}); 
 

 
app.controller('second-controller', function($scope) { 
 
    $scope.someVar = 'Scope 2 | Press ESC Key'; 
 
    $scope.clear = function() 
 
    { 
 
     $scope.someVar = ' Scope 2 value changed!'; 
 
    } 
 
}); 
 

 
app.directive('executeOnEsc', function($document) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope) { 
 
     return $document.bind('keydown', function(event) { 
 
     if (event.which === 27) { 
 
      return scope.$apply(function() { 
 
      scope.someVar = 'Scope 2 value changed!'; 
 
      scope.clear(); 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});
.someDiv { 
 
    background-color: #2ecc71; 
 
    padding: 10px; 
 
    margin: 5px; 
 
} 
 
.second { 
 
    background-color: #3498db; 
 
    padding: 10px; 
 
    margin: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="myApp"> 
 
    <div ng-controller="first-controller"> 
 
    <div class="someDiv" execute-on-esc> 
 
     <p>{{ value }} 
 
     <p> 
 
    </div> 
 
    </div> 
 
    <div class="second" ng-controller="second-controller" execute-on-esc> 
 
    <p>{{ someVar }} 
 
     <p> 
 
    </div> 
 
</section>

-1

nicht die beste Lösung, aber es funktioniert:

var app = angular.module('myApp', []); 
 

 
app.controller('first-controller', function($scope) { 
 
    $scope.value = 'Scope 1 | Press ESC Key'; 
 
    $scope.clear = function() { 
 
    $scope.value = 'Scope 1 value changed!'; 
 
    } 
 
}); 
 

 
app.controller('second-controller', function($scope) { 
 
    $scope.someVar = 'Scope 2 | Press ESC Key'; 
 
    $scope.clear = function() { 
 
    $scope.someVar = ' Scope 2 value changed!'; 
 
    } 
 
}); 
 

 
app.directive('executeOnEsc', function($document) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope) { 
 
     return $document.bind('keydown', function(event) { 
 
     if (event.which === 27) { 
 
      return scope.$apply(function() { 
 
      if (typeof scope.clear === 'function') { 
 
       scope.clear(); 
 
      } else { 
 
       scope.someVar = 'Scope 2 value changed!'; 
 
      } 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});
.someDiv { 
 
    background-color: #2ecc71; 
 
    padding: 10px; 
 
    margin: 5px; 
 
} 
 
.second { 
 
    background-color: #3498db; 
 
    padding: 10px; 
 
    margin: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="myApp"> 
 
    <div ng-controller="first-controller"> 
 
    <div class="someDiv" execute-on-esc> 
 
     <p>{{ value }} 
 
     <p> 
 
    </div> 
 
    </div> 
 
    <div class="second" ng-controller="second-controller" execute-on-esc> 
 
    <p>{{ someVar }} 
 
     <p> 
 
    </div> 
 
</section>

0

, wenn Sie eine Richtlinie in MULTIPAL Controller verwenden möchten, dann kann das Sie es in route.js Datei unten schreiben. für Exp.