Question

我正在测试一个小的angular指令代码然后我通过firebug控制台得到错误无法实例化模块myApp

看到并告诉我上面的代码有什么问题

  <div ng-app="myApp">
    <div log='some-div'></div>
    <p>Have a look at you console!</p>
  </div>

var myApp = angular.module('myApp', []);

myApp.directive('log', function() {

  return {
    controller: function( $scope, $attrs ) {
      console.log( $attrs.log + ' (controller)' );
    },
    compile: function compile( tElement, tAttributes ) {
      console.log( tAttributes.log + ' (compile)'  );
      return {
        pre: function preLink( scope, element, attributes ) {
          console.log( attributes.log + ' (pre-link)'  );
        },
        post: function postLink( scope, element, attributes ) {
          console.log( attributes.log + ' (post-link)'  );
        }
      };
    }
  };

});

Answer 1

它在哪里说 compile: function compile( tElement, tAttributes ) {

我认为应该说 compile: function( tElement, tAttributes ) {

相同的差异在前：和后：功能进一步向下。

编辑：你真正的问题是你的最后一行需要像这样调用函数： })();

Answer 2

不确定为什么，但你的小提琴代码不起作用。在我的小提琴中使用相同的代码并且它可以正常工作

https://jsfiddle.net/sathvike/e7vkqxs8/

如果您在小提琴中使用此代码，则可以使用

<div ng-app='myApp'>
    <div log='some-div'></div>
    <p>Have a look at you console!</p>
 </div>
 <script type="text/javascript">
 var myApp = angular.module('myApp', []);
 myApp.directive('log', function() {

 return {
     controller: function($scope, $attrs) {
     console.log($attrs.log + ' (controller)');
  },
  compile: function(tElement, tAttributes) {
    console.log(tAttributes.log + ' (compile)');
    return {
      pre: function preLink(scope, element, attributes) {
        console.log(attributes.log + ' (pre-link)');
      },
      post: function postLink(scope, element, attributes) {
        console.log(attributes.log + ' (post-link)');
      }
    };
  }
  };

 }); 
</script>

Angular JS：无法实例化模块myApp

2 个答案: