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

我有一个角度项目，app.js，然后是控制器的main.js。问题是我想创建一个指令，无论是在app.js还是main.js创建，我都会遇到两个不同的错误，但两种方式都不起作用

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

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

现在，这很好，但是当我像这样在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);
      }
    };

  });

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

myapp.directive（'listado'，function（）{
返回{
限制：'E'，
编译：函数（元素、属性）{
var filtro=attrs.filtro | |“all”；
var productos=attrs.productos；
var htmlText=


{{producto.title}

{{producto.description}
{{Math.floor（producto.price）}}、{{{decimales（producto.price）}}欧元；

'；
元素。替换为（htmlText）；
}
};
});

然后我得到这个错误：

angular.js:13424错误：[ng:areq]参数“MainCtrl”不是函数，未定义

因此，我尝试将app.js放入，然后我得到另一个错误：

angular.js:68未捕获错误：[$injector:modulerr]未能实例化模块nombre_proyectoApp，原因是： 错误：[$injector:nomod]模块“nombre_proyectoApp”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 $injector/nomod？p0=nombre_proyectoApp

在main.html中，我这样调用指令

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

  });

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

---

任何帮助都将不胜感激。

修复。。。除了每一个错误之外，我还有一个非法的令牌使一切都出错了