角度カスタムディレクティブで値が定義されていません

Question

DOM要素を表示する権限がない場合、DOM要素を破棄するためのディレクティブを作成しようとしました。 I次のようにこれを行う：rootScopeから取られ、現在のユーザーがそれの許可の間で許可「manage_appointments」を持っていない場合、このdivがなければなりません。この状況では

<div class="col-xs-12 col-md-9" ng-permission="manage_appointments"></div> 

例えば：

angular 
     .module('digital_equation.auth') 
     .controller('AuthLoginController', AuthLoginController) 
     .directive('ngPermission', ngPermissionDirective); 

function ngPermissionDirective() { 
    return { 
     multiElement: true, 
     scope: { 
      ngPermission: '@' 
     }, 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      scope.$watch('ngPermission', function (value) { 
       console.log(value); 
       //Access rootScope to get the current user permissions 
       var permissions = scope.$root.globals.currentUser.role.settings.permissions; 
       //Loop through permissions object to check if any permission is the same as the value sent to directive 
       var keepGoing = true; 
       angular.forEach(permissions, function (permission, key) { 
        if (keepGoing == true) 
        { 
         if (key == value) { 
          element.show(); 
          keepGoing = false; 
         } 
         else { 
          element.hide(); 
         } 
        } 
       }); 
      }) 
     } 
    }; 
} 

は、HTML破壊されました。あなたが見ることができるように、私はそれを隠す方法しか知りませんが、これでは十分ではありません。ページにこのdivが表示されないようにするために、それを破壊する必要があります。 私の2番目の問題は、console.log(value);が私が何を試しても関係なくundefinedを返すということです。 また、rootScopeにアクセスする際にもアドバイスが必要です。ここでパラメータとしてrootScopeを渡すと動作しますが、スコープも渡すことはできません。どうすればこのようにすることができますか？

link: function(rootScope, element, attributes) 

私はauthControllerで私のディレクティブを宣言していても、私はそれが私のプロジェクト全体で利用できるようにする必要がありますのでご注意ください。 申し訳ありませんが、AngularJsの私の最初のカスタムディレクティブです。私は多くのオプションを試しました。 お時間をいただきありがとうございました！

編集：

scope.$watch('ngPermission', function (value) 

これは、値が未定義であることと私の問題を解決したが、私は2つの異なる要素（非表示にするための1と示される1）にディレクティブを使用しようとすると、それがどんな最後を行います私の指示の使用が適用されます（この場合は両方とも表示されます）。これがどうして起こるのか？

ソリューション：

function ngPermissionDirective() { 
    return { 
     multiElement: true, 
     priority: 900, 
     scope: { 
      ngPermission: '@' 
     }, 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      scope.$watch('ngPermission', function (value) { 
       console.log(value); 
       //Access rootScope to get the current user permissions 
       var permissions = scope.$root.globals.currentUser.role.settings.permissions; 
       //Loop through permissions object to check if any permission is the same as the value sent to directive 
       var keepGoing = true; 
       angular.forEach(permissions, function (permission, key) { 
        if (keepGoing == true) 
        { 
         if (key == value) { 
          element.show(); 
          keepGoing = false; 
         } 
         else { 
          element.remove(); 
         } 
        } 
       }); 
      }) 
     } 
    }; 
} 

Answer 1

scope.$watch('ngPermission', ...にscope.$watch(attributes.ngPermission, ...を変更してみてください。

別のアプローチは$observeかもしれない - attributes.$observe('ngPermission', ...