1

ngRepeat を使用しているときに、配列から 4 つの項目をロードした順序付けられていないリストがあります。リスト項目のアンカー タグには、メッセージを起動する ngClick 属性の機能があります。関数呼び出しは、次のように使用するとうまく機能します。

<ul>
  <li ng-repeat="n in supsNames">
    <a ng-click="myAlert(n.name)">{{n.name}}</a>
  </li>
</ul>

リスト項目を含む順序付けられていないリストを挿入するための簡単なディレクティブを作成しました。リストは問題なくロードされますが、前述の同じ機能が起動しません。コードは次のとおりです。

<div list items="supsNames">
  <a ng-click="myAlert({{item.name}})">{{item.name}}</a>
</div>

これが私のjavascriptとangularjsコードです:

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

app.controller('myCtrl', function($scope) {

$scope.title = 'ngClick within ngTransclude';
$scope.supsNames = [
    {"name" : "Superman"},
    {"name" : "Batman"},
    {"name" : "Aquaman"},
    {"name" : "Flash"}
  ];

  $scope.myAlert = function(name) {
    alert('Hello ' + name + '!');
  };
});

app.directive('list', function() {

return {

restrict: 'A',
scope: {
  items: '='
},
templateUrl: 'list.html',
transclude: true,
link: function(scope, element, attrs, controller) {
  console.log(scope);
}

};

});

私がやろうとしたことを見たい場合に備えて、plnkrもあります： http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview

助けてくれてありがとう。

4

3 に答える 3

2

私はplunkrを動かしました。それがまさにあなたが探しているものかどうかはわかりません。以下の主なコードの変更をコピーしました。

plunkr は次のとおりです。

http://plnkr.co/edit/GEiGBIMywkjWAaDMKFNq?p=preview

変更されたディレクティブは次のようになります。

app.directive('list', function() {
  return {
    restrict: 'A',
    scope: {
      items: '=', 
      ctrlFn: '&' //this function is defined on controller
    },
    templateUrl: 'list.html',
    transclude: true,
    link: function(scope, element, attrs, controller) {

      //directive fn that calls controller defined function
      scope.dirFn = function(param) {
        if(scope.ctrlFn && typeof scope.ctrlFn == 'function') { //make sure its a defined function
          scope.ctrlFn( {'name': param} ); //not sure why param has to be passed this way
        }
      }

    }

  };

});

そして、コントローラーにバインドされた html ファイルで呼び出される方法は次のとおりです。

<div list items="supsNames" ctrl-fn="myAlert(name)">
  <a ng-click="dirFn(item.name)">{{item.name}}</a>
</div>

以前に起こっていたのは、コントローラーで定義された関数をディレクティブの分離されたスコープ内で使用しようとしていたため、機能していなかったということです。その関数はディレクティブで定義されていませんでした。だから私がしたことは、「＆」でメソッドバインディングを受け入れるディレクティブに別のパラメータを追加したことです（私はそれが呼ばれるものだと思います）。

したがって、基本的にはコントローラー メソッドをディレクティブに渡すと、そのメソッドは、私が創造的に "dirFn" と名付けたディレクティブで定義されたメソッドによって必要に応じて呼び出されます。これがそれ自体が最善の方法であるかどうかはわかりませんが、既存のプロジェクトで使用して良い結果が得られました;)

于 2013-12-09T18:55:21.067 に答える