複数のコントローラで1つのディレクティブを使用する方法は？

Question

は、私は2つのコントローラを持って初-コントローラの、「第二-コントローラのと1つのディレクティブ「executeOnEsc」。

は、私は、これら二つのコントローラ間の「共有」このディレクティブが必要：ディレクティブはスコープ1に$ scope.clear関数を呼び出してスコープ2に変数SOMEVARを変更する必要があります。

現時点では、コードスニペットでわかるように、このディレクティブはエラーを生成します。scope.clearは関数ではありません。

そして、それは、ディレクティブが2回実行されるため、意味を成します：最初の「クリア」機能を持っていない範囲スコープ2で1、その後、中。

この状況の解決方法を教えてください。私は2つの異なる指示をすることができますが、それは最善の解決策ではありません。

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>

Answer 1

あなたはあまりにも二コントローラに

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>

Answer 2

ない最適なソリューションを明確に機能を追加する必要がある2つの異なるディレクティブを作成する必要はありません、それは動作します：

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>

Answer 3

あなたはmultipalコントローラで1つのディレクティブを使用する場合は、下部にroute.jsファイルに書き込むことができます。 Expのために

angular 
.module('myapp') 
.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$httpProvider', 

    function($stateProvider, $urlRouterProvider,$httpProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
     .state('index', { 
      url: '/', 
      controller: 'homeController', 
      templateUrl: 'templates/home_page.html' 
     }) 

    } 
    ]).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(); 
       }); 
      } 
      }); 
     } 
     }; 
    });