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 に答える