創建於AngulaJs一個搜索：未捕獲的錯誤：[$注射器：modulerr]

我想創建基於我對codepen發現片斷AngularJs搜索，這是URL http://codepen.io/netsi1964/pen/AmGcg

這是一個片段上我曾嘗試

<div ng-app="myApp" ng-controller="Example"> 
    <div class="container controls"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <form action="" method="POST" role="form"> 
        <legend>Find a movie from <a href="http://yousee.tv/film">YouBio</a></legend> 
        <div class="input-group"> 
         <input type="search" id="search" class="form-control" ng-model="search"> 
         <div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div> 
     <div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div> 
     <div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div>

這是JS文件：

angular.module("myApp",["ngSanitize"]) 
.filter('replace', function() { 
    var pat =//gi; 
    return function (text) { 
     var clean = text.replace(pat, "-"); 
     var temp = clean.split("---"); 
     if (temp.length>1) { 
      clean = temp[0]; 
     } 
     return clean; 
    }; 
}) 
.controller("Example", function($scope, $interval) { 
    $scope.search = "orig"; 
    $scope.movies = youMovie; 
    $scope.reverse = false; 
    $scope.list = false; 
});

而且我收到以下錯誤未捕獲的錯誤：[$注射器：modulerr] 在我的瀏覽器控制檯

這裏是我做了 http://plnkr.co/edit/00ghGQtBKkvEKkzlD52c?p=preview

來源

2015-10-20 Blaze

一個普拉克你注入你沒有在頁面加載的模塊。 ngSantize模塊獨立於angular.min.js源文件。您需要在頁面上加載angular-sanitize.min.js。

來源

2015-10-20 15:58:11

文件已加上了普拉克。你可以看看。 – Blaze

你有一個語法問題。這是我所看到的 - 。你在src屬性後缺少「=」 –

當然！我現在看到它。該代碼片段似乎不完整codepen – Blaze

你不加載santize文件，如：

的Index.html

<html> 
<head> 
<title></title> 
</head> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script> 

//** This file add*** 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script> 

<script src="app.js"></script> 

<link href="style.css" rel="stylesheet"> 
<body>

來源

2015-10-20 16:01:38 Sandeep

對不起。請你能更加明確。 – Blaze

<鏈路HREF = 「https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css」的rel = 「樣式表」> **此文件加** <鏈接href =「style.css」rel =「stylesheet」> – Sandeep

仍然是一樣的結果！ – Blaze

我做了一些修改，現在的代碼工作。

HMTL標記，順便有大量miskes的。

<html> 
<head> 
<title></title> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet"> 

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.bundle.js"></script> --> 



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script> 
<script src="app.js"></script> 

<link href="style.css" rel="stylesheet"> 
</head> 

<body> 
<div class="container"> 
    <div class="row"> 
     <h1 class="col-md-12">AngularJS <code>ng-repeat</code> with search</h1> 
    <blockquote>AngularJS lets you easily do a <em>instant search</em> if you say save your data as <code>JSON</code>. The elegant way that it is coded and the performance I find great. The <code>JSON</code> data I use, I have collected from Danish streaming TV service <a href="http://yousee.tv/film">YouBio</a>. I use <code>bootstrap 3</code> to control the markup/layout. <br /> 
     <code>2014/11/14</code> Added link to watch the movie on YouSee Play (not free).</blockquote> 
</div> 
</div> 
<div ng-app="myApp" ng-controller="Example"> 
    <div class="container controls"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <form action="" method="POST" role="form"> 
        <legend>Find a movie from <a href="http://yousee.tv/film">YouBio</a></legend> 
        <div class="input-group"> 
         <input type="search" id="search" class="form-control" ng-model="search"> 
         <div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div> 
     <div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div> 
     <div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
    <div class="container result"> 
     <div ng-class="list ? 'col-md-6' : 'col-md-4'" class="movie" ng-repeat="movie in movies | filter:search | orderBy:'title':reverse"> <a href="https://film.youseeplay.dk/search/{{movie.title}}" target="_blank"> 
      <img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{movie.src}}" alt="Click to play {{movie.title}} on YouSee Play (not free)" title="Click to play {{movie.title}} on YouSee Play (not free)" class="img-thumbnail" /></a> 
      <h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{movie.title}}</h4> 
     </div> 
    </div> 
</div> 

<body> 
</html>

控制器，你也有我以前不和在視圖中的數據，所以我增加了一些假的數據：

angular.module("myApp",["ngSanitize"]) 
.filter('replace', function() { 
    var pat =//gi; 
    return function (text) { 
     var clean = text.replace(pat, "-"); 
     var temp = clean.split("---"); 
     if (temp.length>1) { 
      clean = temp[0]; 
     } 
     return clean; 
    }; 
}) 
.controller('Example', ['$scope', 
    function($scope) { 
    $scope.$watch('search', function(newVal, oldVal) { 
     $scope.search = newVal; 
     $scope.movies = [{title: 'Movie 1'}, {title: 'Movie 2'}, {title: 'Movie 3'}, {title: 'Moive 4'}, {title: 'Movie 5'}]; 
     $scope.reverse = false; 
     $scope.list = false; 
    }); 
    } 
]); 
//document.querySelector('#search').focus();

來源

2015-10-20 16:25:26 Miha2255

正在檢查解決方案。 – Blaze

是不是作爲codepen演示 – Blaze

請爲此解決方案創建一個plunk。 – Blaze

創建於AngulaJs一個搜索：未捕獲的錯誤：[$注射器：modulerr]

回答

相關問題