Question

我有一个角度项目，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未捕获错误：[$ injector：modulerr]无法实例化模块nombre_proyectoApp，原因如下：错误：[$ injector：nomod]模块'nombre_proyectoApp'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.5.3/ $注射器/ NOMOD？P0 = nombre_proyectoApp

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

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

非常感谢任何帮助..

Answer 1

修正......除了每一个错误之外，我还有一个非法的令牌，让一切都搞错了。

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

1 个答案: