Why does my directive fail without errors?

Question

This directive:

angular.module('WizmoApp', [])
    .directive('confirmClick', function() {
        return {

                priority: -1,
                restrict: 'A',
                link: function(scope, element, attrs){
                    element.bind('click', function(e){
                        var message = attrs.ngConfirmClick;
                        // confirm() requires jQuery
                        if(message && !confirm(message)){
                            //e.stopImmediatePropagation();
                            //e.preventDefault();
                        }
                    });
                }
        };
    });

, which I'm trying to transcribe from here: Confirmation dialog on ng-click - AngularJS is enough to bring my app to a screeching halt. No display on-screen, no js errors, no nothing, just a blank sacreen.

This is how I'm using it:

<tr class="" 
    ng-repeat="package in adminManifestVm.Manifest | orderBy:'Id' track by $index"  
    ng-click="adminManifestVm.debinPackage(package.Id);" 
    ng-confirm-click="Are you sure you want to debin this?">

No idea how to debug a directive, let alone write one.

[ EDIT ] I just noticed that, in the example, the directive is actually called ngConfirmClick. Changed it, but makes no difference.

Vikash Kumar · Answer 1 · 2016-08-10T17:03:57.760

1

you are using it wrong

<tr class="" 
ng-repeat="package in adminManifestVm.Manifest | orderBy:'Id' track by $index"  
ng-click="adminManifestVm.debinPackage(package.Id);" 
confirm-click val="Are you sure you want to debin this?">

and in your directive add scope

angular.module('WizmoApp', [])
.directive('confirmClick', function() {
    return {
            scope:{
              val: '='
             },
            priority: -1,
            restrict: 'A',
            link: function(scope, element, attrs){
                element.bind('click', function(e){
                    var message = val;
                    // confirm() requires jQuery
                    if(message && !confirm(message)){
                        //e.stopImmediatePropagation();
                        //e.preventDefault();
                    }
                });
            }
    };
});

edited Aug 10 '16 at 17:03

answered Aug 10 '16 at 14:40

Vikash Kumar

1,712
1
11
17

Ah. Serves me right for copying a snippet that was not vetted as correct. Thanks. – DaveC426913 Aug 10 '16 at 15:00
Unfortunately, it does not work as-is. I get a 'unexpected string' at val '=' or 'val is undefined'. I'll fiddle with it. – DaveC426913 Aug 10 '16 at 15:05
I assumed it was a missing ':' but it isn't. – DaveC426913 Aug 10 '16 at 22:33
Gotta be attrs.val – DaveC426913 Aug 10 '16 at 23:11

DaveC426913 · Answer 2 · 2016-08-10T23:57:46.673

That solution is not working. This error makes no sense:

Syntax Error: Token 'Package' is an unexpected token at column 6 of the expression [Move Package back to Pile?] starting at [Package back to Pile?].

This is how I've implemented it:

Directive:

(function(){
angular
    .module('WizmoApp')
    .directive('confirmClick', function () {
        return {
            priority: -1,
            restrict: 'A',
            link: function(scope, element, attrs){
                element.bind('click', function(e){
                    var message = attrs.val;
                    // confirm() requires jQuery
                    if(message && !confirm(message)){
                        e.stopImmediatePropagation();
                        e.preventDefault();
                    }
                });
            }
        }
});
})();

View:

<tr class="" 
    ng-repeat="package in adminManifestVm.Manifest | orderBy:'Id' track by $index"  
    ng-click="adminManifestVm.debinPackage(package.Id);" 
    confirm-click 
    val="Move Package back to Pile?">

Why does my directive fail without errors?

2 Answers2