Jak uzyskać dostęp do funkcji kontrolera w linku dyrektywy?

Question

Jak uzyskać dostęp do funkcji kontrolera dyrektywy z linku dyrektywy? Sterownik Bellow przekazany do łącza jest pusty, chciałbym uzyskać w nim funkcje show() hide().

Moja obecna dyrektywa:

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

Publishing zakresu może pracować, ale nie najlepsza praktyka, ponieważ "zanieczyszcza" zakres. Właściwym sposobem komunikacji z własnym kontrolerem jest require it - wówczas stanie się on dostępny jako parametr funkcji link, wraz z innymi wymaganymi dyrektywami.

Innym problemem jest sposób ujawniania funkcji na kontrolerze - odbywa się to przy użyciu this.someFn, a nie przez zwracanie obiektu.

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

Masz jakiś problem wewnątrz funkcji kontrolera

Tutaj jest kod działa poprawnie

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