Angular ngSanitize / ngDragDrop compatibility

Question

So, I'm working on an Angular application and I have been having problems regarding compatibility between ngSanitize and ngDragDrop. ngDragDrop can be found at http://ganarajpr.github.io/angular-dragdrop/ and ngSanitize at https://docs.angularjs.org/api/ngSanitize/service/$sanitize.

The very moment I include ngSanitize on my app module, the angular code stops working entirely.

I have a test file called compatibility.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset='utf-8'>

    <script src="compatibility.js"></script>
    <script src="angular/angular.min.js"></script>
    <script src="angular-resource/angular-resource.min.js"></script>
    <script src="angular/angular-sanitize.min.js"></script>
    <script src="angular/draganddrop.js"></script>

</head>

<body>

    {{3+1}}

</body>

</html>

And another called compatibility.js

var app = angular.module("MyApp", ["ngDragDrop","ngSanitize"]);

app.controller("Controller", [ '$scope', '$sce', function($scope, $sce) {

}]);

I haven't the foggiest idea why it isn't working and I'm not sure what to do. Supposedly, evaluating {{3+1}} should return a 4 when the code is run, but it doesn't. I've worked with both ngSanitize and ngDragDrop separately, and the problem only shows when I try to use both simultaneously.

score 0 · Answer 1 · answered Aug 19 '14 at 19:39

Try moving your compatibility.js file down to be under the angular.min.js.

Or just put it at the bottom like this:

<script src="angular/angular.min.js"></script>
<script src="angular-resource/angular-resource.min.js"></script>
<script src="angular/angular-sanitize.min.js"></script>
<script src="angular/draganddrop.js"></script>
<script src="compatibility.js"></script>

PS. I don't think there is any compatibility problems.

Angular ngSanitize / ngDragDrop compatibility

1 Answers1