Làm thế nào để truy cập các chức năng điều khiển trong liên kết chỉ thị?

Question

Làm cách nào để truy cập các chức năng điều khiển chỉ thị từ liên kết chỉ thị? Bellow điều khiển thông qua liên kết là sản phẩm nào, tôi muốn nhận được trong nó hiển thị() hide() chức năng.

chỉ hiện tại của tôi:

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

xuất bản trên phạm vi có thể làm việc, nhưng không phải thực hành tốt nhất, vì nó "gây ô nhiễm" phạm vi. Cách thích hợp để giao tiếp với bộ điều khiển riêng là require - sau đó nó sẽ trở thành sẵn có dưới dạng tham số cho hàm link cùng với các chỉ thị bắt buộc khác.

Vấn đề khác là cách bạn hiển thị các chức năng trên bộ điều khiển - điều này được thực hiện bằng cách sử dụng this.someFn, không phải bằng cách trả về một đối tượng.

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

Bạn có một số loại vấn đề bên trong chức năng điều khiển

Dưới đây là mã làm việc tốt

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