AngularJS:来自控制器

时间:2015-10-02 07:23:04

标签: javascript .net angularjs asp.net-mvc

背景

我有一个顶级指令,需要由控制器访问。请考虑这个Plunk

指令

app.directive('topDirective', ['$compile', function($scope){
  return {
    scope: {},
    restrict: 'E',
    template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>',
    controller: function($scope) {
      var self = {};

      $scope.CallMe = function(){
        alert('Call Me');
      };
    },
    link: function($scope, $elem, $attrs, $ctrl) {

    }
  };
}]);

需要访问权限的控制器

app.controller('subController', [
  '$scope', 
      function($scope){
        var self = {};

        $scope.CallDirective = function() {
          alert('>>> Replace by call to directive function CallMe (somehow) <<<')
        };
      }]);

问题

如需更换此行,我需要做什么:

alert('>>> Replace by call to directive function CallMe (somehow) <<<')

通过实际调用指令中的CallMe()函数?

如果不能直接使用,有没有办法在功能上共享指令和控制器都可以使用?我的第一个想法是服务,但它需要在真实场景中进行DOM操作,所以这不是一个选项。

有什么建议吗?

1 个答案:

答案 0 :(得分:3)

Controller中的

发出事件

app.controller('subController', [
  '$scope','$rootScope', 
      function($scope,$rootScope){
        var self = {};

        $scope.CallDirective = function() {
          var data ='This is new data';
          $rootScope.$emit('callDirective',data);
        };
      }]);

并且在指令中你可以像

那样做
app.directive('topDirective', ['$compile', function($scope){
  return {
    scope: {},
    restrict: 'E',
    template: '<h3>Top Directive</h3><p><button ng-click="CallMe()">Click Me</button></p>',
    controller: function($scope,$rootScope) {
      var self = {};

      $scope.CallMe = function(data){
        alert(data);
      }; 
      $rootScope.$on('callDirective',function(type,data){
         $scope.CallMe(data);
});
    },
    link: function($scope, $elem, $attrs, $ctrl) {

    }
  };
}]);