Как получить доступ к функциям контроллера в директивной ссылке?

Question

Как получить доступ к функциям контроллера директивы из директивной ссылки? Контроллер Bellow, переданный в ссылку, пуст, я хотел бы получить в нем функции show() hide().

Моя текущая директива:

app.directive('showLoading', function() { 
    return { 
    restrict: 'A', 
    // require: 'ngModel', 
    scope: { 
     loading: '=showLoading' 
    }, 
    controller: function($scope, $element) { 
     return { 
     show: function() { 
      alert("show"); 
     }, 
     hide: function() { 
      alert("hide"); 
     } 
     }; 
    }, 
    link: function($scope, $element, $attrs, controller) { 
     $scope.$watch('loading', function(bool) { 
     if (bool) { 
      controller.show();//undefined 
     } else { 
      controller.hide(); 
     } 
     }); 
    } 
    }; 
}); 

Answer 1

Публикация на сферу может работать, но не наилучшая практика, поскольку она «загрязняет» сферу действия. Правильный способ связи с собственным контроллером - это require, тогда он станет доступен как параметр функции link, а также другие необходимые директивы.

Другая проблема заключается в том, как вы предоставляете функции на контроллере - это делается с помощью this.someFn, а не путем возврата объекта.

app.directive('showLoading', function() { 
    return { 
    restrict: 'A', 
    require: ['ngModel', 'showLoading'], // multiple "requires" for illustration 
    scope: { 
     loading: '=showLoading' 
    }, 
    controller: function($scope, $element) { 
     this.show = function() { 
     alert("show"); 
     }; 

     this.hide = function() { 
     alert("hide"); 
     }; 
    }, 
    link: function($scope, $element, $attrs, ctrls) { 
     var ngModel = ctrls[0], me = ctrls[1]; 

     $scope.$watch('loading', function(bool) { 
     if (bool) { 
      me.show(); 
     } else { 
      me.hide(); 
     } 
     }); 
    } 
    }; 
}); 

Answer 2

У вас есть какие-то проблемы внутри функции контроллера

Вот код работает отлично

app.directive('showLoading', function() { 
    return { 
    restrict: 'AE', 
    // require: 'ngModel', 
    scope: { 
     loading: '=showLoading' 
    }, 
    controller: function($scope, $element) { 
     $scope.show = function() { 
      alert("show"); 
     }, 
     $scope.hide = function() { 
      alert("hide"); 
     } 
    }, 
    link: function($scope, $element, $attrs) { 
     $scope.$watch('loading', function(bool) { 
     if (bool) { 
      $scope.show();//undefined 
     } else { 
      $scope.hide(); 
     } 
     }); 
    } 
    }; 
});