Question

我试图以角度创建一个简单的popover指令，但它似乎并没有起作用。我不确定为什么，但指令似乎没有实例化 - 我甚至没有得到console.log回来：

var core = angular.module('core', []);
core.directive('popover', function(){
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {
        var isTouchDevice = !!("ontouchstart" in window);
        console.log(isTouchDevice);
        if (isTouchDevice) {
            el.bind("touchstart", function (e) {
                console.log('on mobile');
            });
        } else {
           el.bind("mouseover", function (e) {
              console.log('on desktop');
          });   
        }
      }
   };
});

将它与以下html一起使用：

<div ng-app>
  <div popover>hover me</div>
</div>

http://jsfiddle.net/nv8eq7n8/

Answer 1

您错过了该应用的名称： <div ng-app="core">

似乎代码没有加载，我不得不将html更改为：

<script>
    var core = angular.module('core', []);
    core.directive('popover', function() {
        return {
        restrict: 'A',
        link: function (scope, el, attrs) {
            var isTouchDevice = !!("ontouchstart" in window);
            console.log(isTouchDevice);
            if (isTouchDevice) {
              el.bind("touchstart", function (e) {
                  console.log('on mobile');
              });
            } else {
               el.bind("mouseover", function (e) {
                  console.log('on desktop');
              });   
            }
        }
        };
    });
</script>
<div ng-app="core">
    <div popover>hover me</div>
</div>

Answer 2

您无需将脚本包装在jsfiddle上的文档中（请参阅左上角的菜单，我将其设置为no wrap - in <body>）。否则，DOM将在JS之前加载，因此您将获得缺少的模块错误。

是的，正如另一个答案所说，你需要指定应用名称。

在这里，工作得很好：http://jsfiddle.net/wx8ydotr/

Angular指令未实例化

2 个答案: