3

Angular ディレクティブで分離されたスコープを理解するのに問題があります。公式ドキュメントを読み、この件に関する多くのビデオを見たので、それらの目的はわかりましたが、それらの使用方法はわかりません。

簡単な例を次に示します。
というディレクティブを作成しましたsearchBox(完全なソースとデモを参照)

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

myApp.directive('searchBox', function($timeout) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element) {                
      scope.open = false;

      // Show search input
      scope.showInput = function() {
        scope.open = true;

        // Focus the input
        $timeout(function() {
          element.find('input').focus();
        }, 0);
      };

      // Hide search input
      scope.hideInput = function() {
        scope.open = false;
      };
    }
  }
});

これは実際に期待どおりに機能します。ただし、ディレクティブのスコープを分離したいのですが、(完全なソースとデモscope: trueを参照)) に変更すると機能しなくなりますが、コンソールにエラーが表示されません。scope: {}

それは私が間違っている基本的なことだと確信していますが、誰かが私の目を開いてこれを理解するのを助けてくれることを本当に願っています.

4

1 に答える 1

5

うまくいきました。

問題は、他の要素をラップしているため、ディレクティブに独自のテンプレートを含める (またはtransclude オプションを true に設定する) 必要があることです。

他のディレクティブ (ng-click や ng-blur など) がディレクティブのテンプレート内で定義されているsearch-box場合、それらは検索ボックスの $scope に対して評価されます。しかし、テンプレートがない場合は、親の $scope (この場合、showInput() や hideInput() などの関数はありません) にバブル アップします。

ディレクティブの宣言に html 文字列を含めたくない場合は、templateUrlオプションを使用して外部テンプレートを参照できます。

于 2013-11-12T19:45:42.667 に答える