任何人都可以帮我解决Angular JS中的喷油器错误

时间：2017-02-20 06:51:38

标签： javascript angularjs

我正在尝试在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>

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

3 个答案:

答案 0 :(得分：0)

无法添加评论...

使用非缩小版本的angular，然后当您在控制台中看到该错误时，它是错误详细信息的链接，请在控制台中单击该链接。它应该将您重定向到有角度的网站，它将向您显示确切的错误详细信息，这可以帮助您解决问题。

虽然链接仍然存在，但即使是缩小版本，但由于名称损坏，你不会得到确切的名称，因此使用非缩小版本

答案 1 :(得分：0)

您的代码中存在一些错误，请检查下面的更新代码并使用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>

答案 2 :(得分：0)

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

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

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

}]);
相关问题
最新问题