创建指令会导致 [ng:areq] 错误

Question

我有一个 Angular 项目，app.js 和 main.js 用于控制器。问题是我想创建一个指令，无论是在 app.js 还是 main.js 中创建它，我都会遇到 2 个不同的错误，但无论哪种方式都不起作用。

这是我的 app.js（还没有指令）

var myapp = angular
  .module('nombre_proyectoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngDialog'
  ]);

  myapp.config(function ($routeProvider,$sceDelegateProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        //templateUrl: '/dms/static/nombre_proyecto/views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        //templateUrl: '/dms/static/nombre_proyecto/views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });

    $sceDelegateProvider.resourceUrlWhitelist(['self','http://*.leroymerlin.es/**']);

  });

这是我的 main.js（还没有指令）

myapp.controller('MainCtrl', ['$scope','$http','ngDialog','$sce', function ($scope, $http, ngDialog, $sce) {

    $scope.Math = window.Math;

    $scope.seleccion = 'all';

    $scope.productos = [];

    $http.get('productos.json').then(function(response){
      $scope.productos = response.data;                
    });

    $scope.select = function (s){
      $scope.seleccion = s;
    };

  }]);

现在，这工作得很好，但是当我像这样在 main.js 中添加指令时

myapp.directive('listado', function(){

    return {
      restrict: 'E',
      compile: function(element, attrs){
        var filtro = attrs.filtro || 'all';
        var productos = attrs.productos;
        var htmlText = '
          <ul>
            <li class="producto col-md-12" ng-repeat="producto in '+ productos +'" ng-if="(producto.group == '+ filtro +') || ('+ filtro +' == \'all\')">

              <div class="col-md-4">
               <img src="{{producto.imgUrl}}" alt="foto">
              </div>

              <div class="col-md-5">
               <p class="titulo">{{producto.title}}</p>
               <p class="verdeLM"><a href="http://www.leroymerlin.es/fp/{{producto.ref}}">Ref. {{producto.ref}}</a></p>
               <p class="gris">{{producto.description}}</p>
              </div>

              <div class="col-md-3 text-right">
               <div class="precio">{{Math.floor(producto.price)}},<sup>{{decimales(producto.price)}} &euro;</sup></div>
               <a class="btnVerProd" href="http://www.leroymerlin.es/fp/{{producto.ref}}" target="_blank" ng-click="verProd(producto.ref)">Ver producto</a>
              </div>

            </li>
          </ul>';
        element.replaceWith(htmlText);
      }
    };

  });

然后我得到这个错误：

angular.js:13424 错误：[ng:areq] 参数 'MainCtrl' 不是函数，未定义 http://errors.angularjs.org/1.5.3/ng/areq?p0=MainCtrl&p1=not%20aNaNunction%2C%20got%20undefined

所以，我尝试输入 app.js，然后我得到另一个错误：

angular.js:68 Uncaught Error: [$injector:modulerr] 无法实例化模块 nombre_proyectoApp 由于： 错误：[$injector:nomod] 模块“nombre_proyectoApp”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.5.3/$injector/nomod?p0=nombre_proyectoApp

在 main.html 我正在调用这样的指令

<listado productos="productos"></listado>

任何帮助将不胜感激..

Answer 1

已修复...除了每个错误之外，我还有一个非法令牌导致一切出错。