Question

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

我正在孤立这个问题，现在这里的东西搞乱了ng-show，我无法直接控制它。

查看

<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>

CONTROLLER

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

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

指令

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的警告消息，该控件在控制器中调用其值（布尔值）通过自定义指令更改的范围。

查看

<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>

CONTROLLER

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

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

指令

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

这里应该发生的是当用户点击数据表按钮时，如果服务器响应不好，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'
}

AngularJS - 通过自定义指令控制ng-show

1 个答案: