Wie kann ich die Direktive umschalten, ohne die Scope-Deklaration zu verwenden?

Question

Ich muss ein Attribut aus einer Direktive beobachten und eine Funktion umschalten, wenn der Wert wahr ist, dies funktioniert beim ersten Klick, aber ich muss dann das zurücksetzen Wert des ATTRIBUTE/Attribut-Modells, sobald es ausgewertet wurde, und das ist der Teil, den ich nicht herausfinden kann.

DEMO AUSGABETAG: https://jsfiddle.net/DG24c/200/

Das gewünschte Ergebnis die EXTERNAL ACCESS Taste in meiner Demo immer löst die Warnmethode zu haben wäre.

Vorlage:

<div ng-controller="otherController"> 
    <button interactive show-when="toggled">Show Directive Alert</button> 
    <button ng-click="toggled = true" >External access</button> 
</div> 

Javascript:

myApp.controller("otherController",function($scope){ 
    $scope.toggled = false; 
}); 


myApp.directive('interactive', function($parse) { 
    return { 
    restrict : 'A', 
    // scope : true || {} cannot be used 
    link : function(scope, element,attrs) { 

     element.on('click', function() { 
     show(); 
     }); 

     scope.$watch(attrs.showWhen, function(newValue,o) {  
      if (newValue) { 
       // the value is true, but now I need to reset 
       // the value on TOGGLED back to false here, so that the next 
       // time the button clicks, it will show the alert 
       show(); 
       // tried attrs.$set('showWhen', false); 
       // tried var showAttr = $parse(attrs.showWhen)(); 
       // showAttr = false; 

      } 
     }); 

     function show() { 
      alert('showing!'); 
     } 
    } 
    }; 
}) 

Answer 1

starten:

$parse(attrs.showWhen + ' = false')(scope); 

Demo: https://jsfiddle.net/DG24c/204/

Javascript :

myApp.directive('interactive', function($parse) { 
    return { 
    restrict : 'A', 
    link : function(scope, element,attrs) { 

     element.on('click', function() { 
     show(); 
     }); 

     scope.$watch(function(inboundScope) { 
      // gets the value of the attribute 
      var interactive = $parse(attrs.showWhen)(inboundScope); 
      if (!interactive) return false; // no need to continue if the value is already false 
      $parse(attrs.showWhen + ' = false')(inboundScope); // updates parent scopes value back to false 
      return interactive;   
     }, function(newValue) { 
      if (newValue) show(); 
     }); 


     function show() { 
      alert('showing!' + attrs.showWhen); 
     } 
    } 
    }; 
}); 

HTML:

<div ng-app="myApp"> 
    <div ng-controller="myCtrl as $ctrl"> 
    <button interactive show-when="$ctrl.toggled">Show Directive Alert</button> 
    <button ng-click="$ctrl.toggled = true" >External access</button> 
    <pre>{{$ctrl.toggled | json}}</pre> 

    <button interactive show-when="$ctrl.toggled2">Show Directive Alert2</button> 
    <button ng-click="$ctrl.toggled2 = true" >External access2</button> 
    <pre>{{$ctrl.toggled2 | json}}</pre> 

    </div> 
</div> 

Answer 2

Sie sollten so nicht verwenden Attribute, müssen Sie Umfang nutzen zu können. Nicht wirklich sicher, was dein Kommentar // scope : true || {} cannot be used bedeutet, obwohl ... warum kannst du nicht?

Es funktioniert gut, sofern Sie tatsächlich Daten verwenden, um mit Umfang verbindlich, statt nur an einem Attribut suchen: https://jsfiddle.net/DG24c/203/

myApp.directive('interactive', function($parse) { 
    return { 
    restrict : 'A', 
    scope: { 
     showWhen: '=' 
    }, 
    link : function(scope, element) { 
     element.on('click', function() { 
     show(); 
     }); 

     scope.$watch('showWhen', function(v,o) { 
      if (v) { 
       scope.showWhen = false; 
       show(); 
      } 
     }); 

     function show() { 
      alert('showing!'); 
     } 
    } 
    }; 
})