Javascript 在AngulaJs上创建搜索：未捕获错误：[$injector:modulerr]_Javascript_Angularjs

Javascript 在AngulaJs上创建搜索：未捕获错误：[$injector:modulerr]

javascript angularjs

Javascript 在AngulaJs上创建搜索：未捕获错误：[$injector:modulerr],javascript,angularjs,Javascript,Angularjs,我正试图根据在codepen上找到的代码片段在AngularJs上创建搜索，这是URL 这是我尝试过的一个片段 <div ng-app="myApp" ng-controller="Example"> <div class="container controls"> <div class="row"> <div class="col-md-12"> <form action=""

我正试图根据在codepen上找到的代码片段在AngularJs上创建搜索，这是URL

这是我尝试过的一个片段

<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>

我从错误中得到以下信息未捕获错误：[$injector:moduler] 在我的Chrome控制台上

这是我的一记重击

您正在注入一个尚未加载到页面上的模块。ngSantize模块独立于angular.min.js源。您需要在页面上加载

angular sanitize.min.js

。

您不需要像以下那样加载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>


//**此文件添加***

我做了一些修改，代码现在正在运行

顺便说一下，HMTL标记有很多错误

<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();

该文件已添加到plunk上。你可以看看。你有语法问题。这就是我看到的-当然！我现在看到了。codepen中的代码片段似乎不完整，因此作者偷偷将一个外部js文件放入codepen中。这是我使用codepen.io的一个缺点，即某些依赖项是隐藏的。使用plunkr，它们是可见的：）如果这有帮助，请接受：）处理Stackoverflow分数：）抱歉。请你说得更清楚些。还是一样的结果！查看此plunk我正在检查解决方案。请为此答案创建一个plunk。您没有数据，我唯一能做的就是创建一些带有标题的虚拟数据。我理解。。。。检查codepen演示，并相应地对您的答案进行一次记录。。。。

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();