AngularJS-関数をディレクティブに渡す

angularJSの例があります

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

ボタンをクリックすると、警告ボックスが表示されますが、何も表示されません。

誰か助けてもらえますか？

Isolate Scopeディレクティブ内から親スコープのコントローラー関数を呼び出すにはdash-separated、OPで述べたようにHTMLで属性名を使用します。

また、関数にパラメーターを送信する場合は、オブジェクトを渡して関数を呼び出します。

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

おそらく何か不足しているかもしれませんが、他のソリューションは親スコープ関数を呼び出しますが、ディレクティブコードから引数を渡すことができません。これは、などのupdate-fnがupdateFn()固定パラメータで呼び出しているためです{msg: "Hello World"}。わずかな変更により、ディレクティブが引数を渡すことができるようになりました。

<test color1="color1" update-fn="updateFn"></test>

HTMLが関数参照を渡していることに注意してください()。

JS

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

したがって、上記では、HTMLがローカルスコープcallUpdate関数を呼び出しています。これにより、親スコープからupdateFnが「フェッチ」され、ディレクティブが生成できるパラメーターを使用して返された関数が呼び出されます。

http://jsfiddle.net/mygknek2/

'test'ディレクティブのHtmlタグでは、関数の属性名はcamelCasedではなく、ダッシュベースにする必要があります。

そう-の代わりに：

<test color1="color1" updateFn="updateFn()"></test>

書く：

<test color1="color1" update-fn="updateFn()"></test>

これは、ディレクティブ属性（update-fn関数など）と関数の違いを区別するためのAngularの方法です。

双方向バインディングでコントローラー関数を渡すのはどうですか？次に、通常のテンプレートとまったく同じ方法でディレクティブで使用できます（単純にするために、関係のない部分を削除しました）。

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

上記の方法を試してみたので、この質問にたどり着きましたが、どういうわけかうまくいきませんでした。今では完全に動作します。

属性名にはダッシュと小文字を使用します（他の答えが言ったように）：

 <test color1="color1" update-fn="updateFn()"></test>

ディレクティブスコープで「＆」の代わりに「=」を使用します。

 scope: { updateFn: '='}

その後、他の関数と同様にupdateFnを使用できます。

 <button ng-click='updateFn()'>Click</button>

よし！

「＆」の代わりに「=」バインディングを使用する必要がありました。奇妙な行動。

@JorgeGRCご回答ありがとうございます。ただし、「たぶん」の部分は非常に重要です。パラメータがある場合は、それもテンプレートに含めて、必ずローカルなどを指定する必要がありますupdateFn({msg: "Directive Args"}。