11

我在我的一个项目中使用 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>

应用程序的其余部分工作得很好，绑定，默认指令，除此之外的一切。也许我错过了什么？

谢谢，烧焦:)

4

3 回答 3

11

使用 '&' 允许指令执行父范围中定义的表达式/函数。$observe 一个内插的隔离范围属性（即，使用包含 '@' 定义的属性{{}}）来确定它何时更改：

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"not进行比较，true因为插值始终是字符串。

HTML：

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

小提琴。

于 2013-01-14T23:38:13.127 回答
6

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

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

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

于 2014-04-30T09:38:09.253 回答
0

我真的不知道指令应该做什么，因为你所拥有的只是一个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
          }  
   };
});
于 2013-01-14T20:43:10.427 回答