1. ホーム
  2. angularjs

[解決済み] カスタムディレクティブのスコープバインディングで記号 '@', '&', '=', '>' を使用する。AngularJS

2022-04-25 11:54:47

質問

AngularJSのカスタムディレクティブの実装で、これらのシンボルの使用についてたくさん読みましたが、コンセプトがまだ明確ではありません。

カスタムディレクティブの中で、スコープの値の1つを使用すると、どのような意味があるのでしょうか?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

ここで、スコープを使って一体何をするのか?

<ストライク もよくわからない。 "scope:'>'" は、公式ドキュメントに存在するかどうか。私のプロジェクトでは使用されています。 (使用するのは "scope:'>'" は、私のプロジェクトでは問題であったため、修正されました)。

解決方法は?

AngularJSのディレクティブでは、スコープによって、ディレクティブが適用されている要素の属性にあるデータにアクセスすることができます。

これは例によって最もよく説明される。

<div my-customer name="Customer XYZ"></div>

とディレクティブの定義があります。

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

このとき scope つまり、親コントローラのスコープに直接アクセスすることができません。

ごく簡単に言うと、バインドシンボルの意味は次の通りです。

someObject: '=' (双方向データバインディング)

someString: '@' (直接渡されるか、二重中括弧記法で補間される {{}} )

someExpression: '&' (例 hideDialog() )

この情報は AngularJS ディレクティブのドキュメントページ のように、ページ全体に多少分散していますが。

シンボル > は構文に含まれません。

しかし < の一部として存在します。 AngularJS コンポーネントバインディング であり、一方通行のバインディングを意味する。