javascript - AngularJs:无法调用子模块中指令链接的函数？

Question

我的程序无法调用由我的 angurJS 指令链接的函数。以下是我的代码:

“index.html”

 <script src="parent.js"></script>
 <script src="child.js"></script>

“parent.html”

  <div ng-include="'child.html'"></div>

“parent.js”

angular.module('parent-app', [
  'child-app'
])
 .config(function ($stateProvider) {
  $stateProvider
 .state('parent', {
    url: '/',
    templateUrl: 'parent.html',
    controller: 'parentCtrl'
  })
 ;
})
.controller('parentCtrl',function ($scope) {
 });

“child.html”

<div ng-controller="childCtrl">
   <a myDirective > Hello World </a>
<div>

“child.js”(这是一个子模块)

angular.module('child-app', [])
 .controller('childCtrl', function ($scope) {
})

 .directive('myDirective', function() {
 return {
   restrict : 'A',
   link : function($scope, $element) {
     $element.hover(function(){
        alert('get called');

      },
       function(){
      });

   }
 };
 });

当我将鼠标移动到“Hello World”时，“myDirective”链接的函数不会被调用。谁能给我一些建议吗？

谢谢

Answer 1

您的问题在于如何声明指令。

当您使用驼峰命名法命名指令时，它将引用连字符属性。

改变

<a myDirective > Hello World </a>

至

<a my-directive > Hello World </a>

DEMO