I'm getting the following error when I try to do this

var fbcanvas = $('#fbcanvas');

This is the error I got

ReferenceError: $ is not defined

This is my JS code

var feedbackModule = angular.module('feedbackModule', [ 'ui.bootstrap', 'dialogs' ]);

feedbackModule.controller('feedbackDialog', function($scope, $rootScope, $timeout, $dialogs) {
$scope.confirmed = 'You have yet to be confirmed!';
$scope.name = '"Your name here."';

$scope.sendFeedback = function() {

html2canvas(document.body, {
    onrendered: function(canvas) {
    var data = canvas.toDataURL('image/png'), dlg = null;

    dlg = $dialogs.create('js/plugin/vzfeedbacktool.html', 'feedbackToolController', {
        imgdata: data
    }, {
        key: false,
        back: 'static'
    });
    dlg.result.then(function(name) {
        $scope.name = name;
    }, function() {
        $scope.name = 'You decided not to enter in your name, that makes me sad.';
    });

    }
});
}; // end launch

});

feedbackModule.controller('feedbackToolController', ['$scope', '$modalInstance', function($scope, $modalInstance, data) {

$scope.cancel = function() {
$modalInstance.dismiss('canceled');
}; // end cancel

$scope.save = function() {
debugger;
var fbcanvas = $('#fbcanvas');
var ctx = fbcanvas.getContext('2d');
var image = new Image();

image.src = data.imgdata;
ctx.drawImage(image, 0, 0);
}; // end save

}]);

Any idea if I'm missing something? by the way, if I try to execute that code directly in the console it works fine :S

Thanks

I'm getting the following error when I try to do this

var fbcanvas = $('#fbcanvas');

This is the error I got

ReferenceError: $ is not defined

This is my JS code

var feedbackModule = angular.module('feedbackModule', [ 'ui.bootstrap', 'dialogs' ]);

feedbackModule.controller('feedbackDialog', function($scope, $rootScope, $timeout, $dialogs) {
$scope.confirmed = 'You have yet to be confirmed!';
$scope.name = '"Your name here."';

$scope.sendFeedback = function() {

html2canvas(document.body, {
    onrendered: function(canvas) {
    var data = canvas.toDataURL('image/png'), dlg = null;

    dlg = $dialogs.create('js/plugin/vzfeedbacktool.html', 'feedbackToolController', {
        imgdata: data
    }, {
        key: false,
        back: 'static'
    });
    dlg.result.then(function(name) {
        $scope.name = name;
    }, function() {
        $scope.name = 'You decided not to enter in your name, that makes me sad.';
    });

    }
});
}; // end launch

});

feedbackModule.controller('feedbackToolController', ['$scope', '$modalInstance', function($scope, $modalInstance, data) {

$scope.cancel = function() {
$modalInstance.dismiss('canceled');
}; // end cancel

$scope.save = function() {
debugger;
var fbcanvas = $('#fbcanvas');
var ctx = fbcanvas.getContext('2d');
var image = new Image();

image.src = data.imgdata;
ctx.drawImage(image, 0, 0);
}; // end save

}]);

Any idea if I'm missing something? by the way, if I try to execute that code directly in the console it works fine :S

Thanks

• javascript
• angularjs
• canvas
• reference

• 3 You haven't included jQuery – Phil Commented Jun 11, 2015 at 6:26
• 1 @NitinVarpe angular.element / jqLite doesn't work with selectors. I'd just use $document[0].getElementById('fbcanvas') – Phil Commented Jun 11, 2015 at 6:27
• 1 Try to avoid DOM manipulation in controllers as it is not the Angular way. Use a custom directive for that matter. – alesc Commented Jun 11, 2015 at 6:40
• var fbcanvas = jQuery('#fbcanvas'); if you have already referred jQuery. but it's not the Angular way, try do not handle with Dom. – Gary Liu Commented Jun 11, 2015 at 6:55
• 1 Checkout this link for bining angular and canvas: stackoverflow./a/21037213/3153169 – devqon Commented Jun 11, 2015 at 6:59

1 Answer 1

Try this:

var fbcanvas = document.getElementById('fbcanvas');

instead of:

var fbcanvas = $('#fbcanvas');

Check if data is undefined too.