AngularJS - 控制NG-显示通过自定义指令

Question

----更新，请参阅下面原来的问题----

我在这里隔离的问题，而现在的东西与NG-显示搞乱，我无法直接控制它。

VIEW

<div class="alert alert-danger" ng-show="vm.errorNoExistePDF" data-translate="webclientesApp.policy.terms.errorPDF"> 
    Ocurrio un problema al tratar de recuperar el archivo. 
</div> 

控制器

function PolicyController(Principal, Policy, $locale, $rootScope) { 

     var vm = this; 
     vm.polizas = null; 
     vm.errorNoExistePDF = false; 

DIRECTIVE

function tablaPolizas(Principal, $locale, $state, $rootScope, $http, $window, $stateParams) { 
var directive = { 

    templateUrl: 'app/components/tabla-polizas/tabla-polizas.html', 
    link: linkFn, 

    ... 

function linkFn($scope, $element, $attrs) { 

vm.errorNoExistePDF = true; 

... 

angular.element('#tabla-polizas').on('click', '#terms', function() { 
        var table = angular.element('#tabla-polizas').DataTable(); 

     $http.get('/webclientes/api/policies/getPlanFile/'+datos, { 
         responseType: 'blob' 
        }) 
        .success(function(data, response) { 

         ... 

        }) 
        .error (function(data){ 
         console.log("ERROR"); 
         vm.errorNoExistePDF = true; 
        }); 
      }); 

----原来的问题----

我试图显示警报带有ng-show的消息t通过自定义指令调用其值（布尔值）更改的控制器中的范围。

VIEW

<div class="alert alert-danger" ng-show="vm.errorNoExistePDF" data-translate="webclientesApp.policy.terms.errorPDF"> 
    Ocurrio un problema al tratar de recuperar el archivo. 
</div> 

控制器

function PolicyController(Principal, Policy, $locale, $rootScope) { 

     var vm = this; 
     vm.polizas = null; 
     vm.errorNoExistePDF = false; 

DIRECTIVE

function tablaPolizas(Principal, $locale, $state, $rootScope, $http, $window, $stateParams) { 
    var directive = { 

     templateUrl: 'app/components/tabla-polizas/tabla-polizas.html', 
     link: linkFn, 
     restrict: "E", 
     controller: function(){ 
     var vm = this; 
     vm.errorNoExistePDF = false; 
     }, 
     controllerAs: 'vm' 
    } 

    return directive; 

    function linkFn($scope, $element, $attrs) { 

     var vm = this; 
     var urlIdioma = null; 
     var table = angular.element('#tabla-polizas'); 
     var dataRow = null; 
     var id = null; 
     var estaFila = null; 
     vm.errorNoExistePDF = false; 

     ... 

     $http.get('/webclientes/api/policies/getPlanFile/'+datos, { 
          responseType: 'blob' 
         }) 
         .success(function(data, response) { 

          var file = new Blob([data], { 
           type: 'application/pdf' 
          }); 
          var fileURL = URL.createObjectURL(file); 

          if ($window.navigator && $window.navigator.msSaveOrOpenBlob) { 
            $window.navigator.msSaveOrOpenBlob(file); 
          }else 
          $window.open(fileURL); 
         }) 
         .error (function(data){ 
          console.log("ERROR"); 
          vm.errorNoExistePDF = true; 
         }); 
       }); 

这里应该发生的事情是，当用户点击进入一个DataTable按钮，如果有从服务器坏响应，ng-show（vm.errorNoExistePDF）应该触发并显示消息，但我失败了了解链接指令和控制器的逻辑。

请帮我理解这一点。

Answer 1

我认为这个问题与范围有关，如果你在指令中使用了controllerAs语法，并且你想将外部范围绑定到指令的控制器范围，你应该使用bindToController: true。

所以，你可以尝试使用这个指令定义：

var directive = { 
    templateUrl: 'app/components/tabla-polizas/tabla-polizas.html', 
    link: linkFn, 
    restrict: "E", 
    scope: { 
     errorNoExistePDF: '@' 
    }, 
    bindToController: true, 
    controller: function(){ 
     var vm = this; 
     vm.errorNoExistePDF = false; 
    }, 
    controllerAs: 'vm' 
}