1

さまざまな構成属性を使用できるカスタム要素ディレクティブ (ユーザーの写真と名前を表示) があります。このuc-on-hover属性は、ユーザーが DOM 要素にカーソルを合わせたときに表示する要素を決定する関数を取ることができます。現在、関数のロジックは $rootScope (Angular サービスで定義) にあります。ディレクティブ ロジックは$eval(attr['ucOnHover'])、$rootScope で関数を実行するために実行します。このパターンは当面はうまく機能しますが、複雑すぎて $rootScope が扱いにくくなる可能性があるのではないかと心配しています。とにかく、ディレクティブとサービスの両方の懸念の分離に注意を払い、柔軟なソリューションを作成しながら、ソリューションの設計を変更できるものはありますか?

ビューのコンテキストでの私のカスタム要素ディレクティブ:

<user-card locator="{{ Item.Author }}" uc-on-hover="$root.namespace.displayFloatingContainer()"></user-card>

$rootScope.namespace.displayFloatingContainer() を定義するサービス:

.service('uiElementService', ['$rootScope', function ($rootScope) {

    $rootScope.ngRestForm.displayFloatingContainer = function (code) {

            try {
                console.log('rootscope.uielementservice hit with code: ' + code);
                return true;
            } catch (err) {
            }
        return false;
        };       
}])
 .run(function (uiElementService) {
     console.log('uiElementService: Start');
 });

ディレクティブは、次の方法で $rootScope の関数を呼び出します。

$scope.$eval(attrs["ucOnHover"]);

この設計に関するヘルプをいただければ幸いです。

4

1 に答える 1

0

$parse を使用して、ディレクティブ スコープ内で関数を実行できます。

https://docs.angularjs.org/api/ng/service/ $parse

実行中の関数が定義されている場所ならどこにでもサービスを注入し、実行中の関数から呼び出すことができます。

これは、引数の配列の一部として渡された関数を起動する uc-on-hover ディレクティブのベアボーン スケルトンです。

(function() {

angular
  .module('yourModuleName')
  .directive('ucOnHover', ucOnHover);

ucOnHover.$inject = ['$parse'];

function ucOnHover($parse) {

var directive = {
  restrict: 'A',
  link: link
}

return directive;

function link(scope, element, attrs) {

  var args = attrs['ucOnHover'].split(' ');

  var hoverFunctions = [];

  angular.forEach(args, function(hoverFunc) {
      hoverFunctions.push($parse(hoverFunc));
  });

  element.on('hover', function(event) {
    event.preventDefault();
    event.stopPropagation();
    scope.$apply(function() {
      angular.forEach(hoverFunctions, function(hoverFn) {
         hoverFn(scope);
       });
    });
  });


}


}

})();

テンプレートで使用されているのと同じディレクティブを次に示します。

<user-card locator="{{ Item.Author }}" uc-on-hover="hoverFunction()"                                         ></user-card>
于 2015-04-30T20:11:56.417 に答える