Question

我在我的一个项目中使用AngularJS，我想尝试创建指令。我已经遵循了几个教程，我无法看到我做错了。即使最糟糕的是，它不会显示任何错误或警告消息，但它也不会执行指令的功能。现在，我的代码就是这样：

angular.module('components', []).directive('ngxOnshow', function() {
   return {
          restrict: 'A',
          link: function(scope, element, attrs){
                        console.log("hello world")
                        //Resto do código da função
          }  
   };
});
var module = angular.module('app', ['components']);

在HTML页面的正文中我有：

<body ng-autobind ng-app="app">

但是，当我使用该指令时，它不起作用。

<div ng-show="showApp == true" ngx-onshow="showAppBar()">
</div>

应用程序的其余部分工作正常，绑定，默认指令，除此之外的所有内容。也许我错过了什么？

谢谢， Scorch：）

Answer 1

使用'＆amp;'允许指令执行父作用域中定义的表达式/函数。 $观察一个插值的隔离范围属性（即一个用'@'定义的包含{{}}的属性）以确定它何时发生变化：

myApp.directive('ngxOnshow', function () {
  return {
    restrict: 'A',
    scope: {
      showApp: '@',
      ngxOnshow: '&'
    },
    link: function (scope, element, attrs) {
      console.log("inside link function")
      attrs.$observe('showApp', function (newValue) {
        newValue === "true" && scope.ngxOnshow()
      })
    }
  };
});

newValue与"true"而非true进行比较，因为内插值始终为字符串。

HTML：

<div ng-show="showApp == true" show-app="{{showApp}}" ngx-Onshow="showAppBar()">

Fiddle

Answer 2

大多数指令错误都显示在控制台中，只需启用日志记录：

app.config(function($logProvider){
    $logProvider.debugEnabled(true);
});

因此，您无需猜测为什么指令不起作用。

Answer 3

我真的不知道该指令应该做什么，因为你所拥有的只是console.log。但是，由于您将函数传递给ngxOnshow参数，我想您要执行它。你需要告诉指令从scope设置为&的父项执行函数：

angular.module('components', []).directive('ngxOnshow', function() {
   return {
          restrict: 'A',
          scope: {
            ngxOnshow: '&'
          },
          link: function(scope, element, attrs){
                        console.log("hello world")
                        //Resto do código da função
          }  
   };
});

AngularJS指令不起作用

3 个答案: