如何在多个控制器中使用一个指令？

Question

我有两个控制器'第一控制器'，'第二控制器'和一个指令'executeOnEsc'。

我需要在这两个控制器之间“共享”此指令：指令应调用范围1 中的 $ scope.clear 函数并更改变量 范围2 中的someVar 。

现在，正如您在代码片段中看到的那样，该指令会产生错误：scope.clear不是函数。

这是有道理的，因为指令运行两次：首先在范围1 中，然后在范围2 中运行，后者没有'clear' 功能。

这种情况的解决方案是什么？我可以制定两个不同的指令，但这不是最好的解决方案。

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

无需创建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() {
            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

如果你想在多重控制器中使用一个指令，那么你可以在底部的 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();
              });
            }
          });
        }
      };
    });

Answer 3

不是最好的解决方案，但它确实有效：

＆＃13;

＆＃13;

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!';
            }
          });
        }
      });
    }
  };
});

＆＃13;

.someDiv {
  background-color: #2ecc71;
  padding: 10px;
  margin: 5px;
}
.second {
  background-color: #3498db;
  padding: 10px;
  margin: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;