Error when creating directive: TypeError: undefined is not a function

Question

嗨，我是 angular 新手。我正在尝试声明一个自定义指令。但是我收到如下控制台错误。

Uncaught TypeError: undefined is not a function directives.js:5 (anonymous function)

看这里：Link

app.js

'use strict';
var app = angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.widgets','myApp.directives']);
app.run(['$route', '$window', '$rootScope', function($route, $window, $rootScope) {
  $route.when('/login', {template: 'partials/login.html', controller: loginCtrl});
  $route.when('/home', {template: 'partials/home.html', controller: homeCtrl});
  $route.otherwise({redirectTo: '/login'});

  var self = this;

$rootScope.$on('$afterRouteChange', function(){
  $window.scrollTo(0,0);
  });
}]);

directives.js

angular.module('myApp.directives', [])
.directive('hello', function() {
   return {
    template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>'
    }
};
});

Answer 1

您的应用程序中遗漏了很多内容，以下内容很少。

在依赖项中添加 ngRoute 模块，在引用中添加 angular-route.js 文件。
您的路由配置应该在 angular 配置块内并且它应该使用 $routeProvider 而不是仅 $route
$routeProvider.when 中的控制器名称应该用单引号引起来 '
app.run 将包含 $rootScope.$on 事件
并且您的指令包含额外的右大括号 }

App.js

'use strict';
angular.module('myApp.directives', []);
angular.module('myApp.filters', []);
angular.module('myApp.services', []);
angular.module('myApp.widgets', []);
var app = angular.module('myApp', ['ngRoute', 'myApp.filters', 'myApp.services', 'myApp.widgets', 'myApp.directives']);
app.config(['$routeProvider', '$window', '$rootScope', function($route, $window, $rootScope) {
    $routeProvider
    .when('/login', {
        template: 'partials/login.html',
        controller: 'loginCtrl'
    })
    .when('/home', {
        template: 'partials/home.html',
        controller: 'homeCtrl'
    })
    .otherwise({
        redirectTo: '/login'
    });
}]);

app.run(['$window', '$rootScope', function($window, $rootScope) {
    $rootScope.$on('$afterRouteChange', function() {
        $window.scrollTo(0, 0);
    });
}]);

Directive.js

angular.module('myApp.directives')
.directive('hello', function() {
  return {
    template: '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>'
  }
});

希望对您有所帮助，谢谢。

Answer 2

你的指令文件中的花括号太多了：

angular.module('myApp.directives', [])
    .directive('hello', function() {
        return {
            template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>'
        };
    });

Error when creating directive: TypeError: undefined is not a function

Error when creating directive: TypeError: undefined is not a function

javascript

angularjs

angularjs-directive