任何人都可以帮助我解决Angular JS中的注入错误

Question

我想在socialengine中使用角度js作为前端视图。但我得到错误。我不知道为什么这个错误是持续存在的。 这是我的错误我得到：

Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to: 
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null 
    at $$SanitizeUriProvider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:18428:35) 
    at new <anonymous> (http://bananabook.net/externals/mootools/mootools-core-1.4.5-full-compat-yc.js?c=199:88:89) 
    at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4857:14) 
    at provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4666:36) 
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:401:32 
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:371:20) 
    at Object.provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4656:9) 
    at ngModule (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2676:16) 
    at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4842:19) 
    at runInvokeQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4730:35) 
http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=ng&p1=TypeError%3A%…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.1%2Fangular.js%3A4730%3A35) 
    at $$SanitizeUriProvider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:18428:35) 
    at new <anonymous> (http://bananabook.net/externals/mootools/mootools-core-1.4.5-full-compat-yc.js?c=199:88:89) 
    at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4857:14) 
    at provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4666:36) 
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:401:32 
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:371:20) 
    at Object.provider (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4656:9) 
    at ngModule (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2676:16) 
    at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4842:19) 
    at runInvokeQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4730:35) 
http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=ng&p1=TypeError%3A%…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.1%2Fangular.js%3A4730%3A35) 
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:68:12 
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4759:15 
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:20) 
    at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4720:5) 
    at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4642:19) 
    at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1838:20) 
    at bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1859:12) 
    at angularInit (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1744:5) 
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:32977:5 
    at HTMLDocument.trigger (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:3314:5) 

这是我使用的代码：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.js"></script> 
<script> 
var app = angular.module("app",['ngSanitize']); 

    app.controller("AppController",function($scope,$sce) { 
     $scope.Videos = [{ 
    chapter_name : "XXXXX", 
    chapter_content : [{ 
    video_name : "XXXXX", 
    Description : "XXXXX", 
    video_id : "pWj1WkzhCiI", 
    },video_name : "XXXX", 
    Description : "xxxx", 
    video_id : "9fIQ_Tp-omk", 
    }],{ 
    chapter_name : "XXXXX", 
    chapter_content : [{ 
    video_name : "XXXXX", 
    Description : "XXXXX", 
    video_id : "pWj1WkzhCiI", 
    }] 

}]; 
    $scope.toggle = []; 
    $scope.togglefunction = function(index){ 
     if($scope.toggle[index]){ 
      $scope.toggle[index] = false; 
     } 
     else{ 
      $scope.toggle[index] = true; 
     } 
    } 

    $scope.playVideo = function(title,id,description){ 
     $scope.trigger = true; 
     $scope.videoTitle = title; 
     $scope.videoUrl = "https://www.youtube.com/embed/"+id+"?rel=0&showinfo=0"; 
     $scope.videodescription = $sce.trustAsHtml(description); 
    } 
    $scope.trustSrc = function(src) { 
    return $sce.trustAsResourceUrl(src); 
    } 

    $scope.trigger1 = true; 

    $scope.trigger2 = { 
    "padding-left" : "8px", 
    "margin-left" : "20px", 
    "postion" : "absolute", 
    "max-height": "520px", 
    "overflow-y": "scroll", 
    "padding-right": "5px", 
    } 

    $scope.opencloseside = function(){ 
    if($scope.trigger1){ 
     $scope.trigger2 = { 
    "padding-left" : "18px", 
    "margin-left" : "120px", 
    "postion" : "absolute", 
    "max-height": "520px", 
    "overflow-y": "scroll", 
    "padding-right": "5px", 
    } 
     $scope.trigger1 = false; 
    } 
    else{ 
     $scope.trigger1 = true; 
    } 
    } 


    }); 
</script> 
<style> 

div.accordion { 

    color: black; 
    cursor: pointer; 
    padding: .95em .7rem; 
    padding-top: 0.95em; 
    padding-right: 0.7rem; 
    padding-bottom: 0.95em; 
    padding-left: .47rem; 
    padding-left: .47rem; 
    width: 64%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
    font-weight: bold; 
    border-top: 1px solid #f2f2f2; 
} 

div.accordion.active, div.accordion:hover { 

    color: #007aff; 
} 

div.panel { 
    padding-left:20%; 
    padding: 0 18px; 
    display: none; 
} 
a.video_page_a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
} 
.video_page_li { 
    padding:12px; 

    color: black; 
    border-top: 1px solid #f2f2f2; 
} 
li.video_page_li:hover , li.video_page_li:active { 

    cursor :pointer; 

} 
div.panel.show { 
    display: block; 
span.greatertoggle { 
    display:none; 
} 
} 
.video_page_ul{ 
padding-left: 5%; 
list-style:none;} 
video_page_a.active{ 
background-color:red;} 
#sidemenubutton { 
    width:250px;;position:absolute;background-color: white; 
} 
@media only screen and (max-device-width: 480px) { 
    #sidemenubutton { 
    width:98%;position:absolute;background-color: white; 
} 
</style> 

<div ng-app="app"> 
    <div style="width: 100%;" ng-controller="AppController"> 
     <div style="float:left;height:100%;width: 20%;max-height:520px;overflow-y:scroll;" ng-show="trigger1"> 
     <div id="sidemenubutton"><button style="width:60px;padding:0px;background:white;border:0px solid white" ng-click="opencloseside()"><img src="http://bananabook.net/public/admin/sidemenuicon.png" style="width:50px;"></button></div> 
      <br><div ng-repeat="videos in Videos"> 
      <div class="accordion" ng-click="togglefunction($index)">{{videos.chapter_name}}</div> 
      <div ng-show="toggle[$index]"> 
       <ul class="video_page_ul"> 
       <li ng-repeat="vid in videos.chapter_content" ng-click="playVideo(vid.video_name,vid.video_id,vid.Description)" class="video_page_li">{{vid.video_name}}</li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
     </div> 
     </div> 
     <button style="width:60px;padding:0px;background:white;border:0px solid white" ng-click="opencloseside()"><img src="http://bananabook.net/public/admin/sidemenuicon1.png" style="width:60px;position:absolute;top:50px;left:0px;" ng-show="!trigger1"></button> 
     <div ng-show="trigger" ng-style="trigger2"> 
     <h1>{{videoTitle}}</h1> 
     <iframe src="{{trustSrc(videoUrl)}}" width="560" height="315" /></iframe> 
     <h3>Description</h3> 
      <span ng-bind-html="videodescription"></span> 
     </div> 
    </div> 
</div> 

我不为什么我收到此错误。请帮我解决这个问题。角

Answer 1

无法添加评论...

使用非精缩版，那么当你看到在控制台的错误，它链接到错误的详细信息，请单击控制台链接。它应该将你重定向到有角度的网站，它会告诉你确切的错误细节，这应该可以帮助你解决问题。

虽然链接仍然存在，甚至有缩小的版本，但由于名字改编你不会得到确切的名字，因此与非精缩版

Answer 2

有在你的代码中的一些错误，请检查更新的代码做并使用ctrl + f5刷新页面

<script> 
     var app = angular.module("app",['ngSanitize']); 

     app.controller("AppController",function($scope,$sce) { 
      $scope.Videos = [{ 
       chapter_name : "XXXXX", 
       chapter_content : [{ 
         video_name : "XXXXX", 
         Description : "XXXXX", 
         video_id : "pWj1WkzhCiI", 
        }, 
        { 
         video_name : "XXXX", 
         Description : "xxxx", 
         video_id : "9fIQ_Tp-omk", 
        }, 
        { 
         chapter_name: "XXXXX", 
         chapter_content: [{ 
          video_name: "XXXXX", 
          Description: "XXXXX", 
          video_id: "pWj1WkzhCiI", 
         }] 
        }] 

      }]; 
      $scope.toggle = []; 
      $scope.togglefunction = function(index){ 
       if($scope.toggle[index]){ 
        $scope.toggle[index] = false; 
       } 
       else{ 
        $scope.toggle[index] = true; 
       } 
      } 

      $scope.playVideo = function(title,id,description){ 
       $scope.trigger = true; 
       $scope.videoTitle = title; 
       $scope.videoUrl = "https://www.youtube.com/embed/"+id+"?rel=0&showinfo=0"; 
       $scope.videodescription = $sce.trustAsHtml(description); 
      } 
      $scope.trustSrc = function(src) { 
       return $sce.trustAsResourceUrl(src); 
      } 

      $scope.trigger1 = true; 

      $scope.trigger2 = { 
       "padding-left" : "8px", 
       "margin-left" : "20px", 
       "postion" : "absolute", 
       "max-height": "520px", 
       "overflow-y": "scroll", 
       "padding-right": "5px", 
      } 

      $scope.opencloseside = function(){ 
       if($scope.trigger1){ 
        $scope.trigger2 = { 
         "padding-left" : "18px", 
         "margin-left" : "120px", 
         "postion" : "absolute", 
         "max-height": "520px", 
         "overflow-y": "scroll", 
         "padding-right": "5px", 
        } 
        $scope.trigger1 = false; 
       } 
       else{ 
        $scope.trigger1 = true; 
       } 
      } 


     }); 
    </script> 

Answer 3

您需要检查您的配置文件。将$compileProvider添加到您的配置结构中。

app.config(['$routeProvider', '$compileProvider', function($routeProvider, $compileProvider) { 

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/); 

}]);