Question

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

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文件。
你的路线配置应该在角度配置块内，它应该使用$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>'
        };
    });

创建指令时出错：TypeError：undefined不是函数

2 个答案: