Как я могу переключить директиву без использования объявления области

Question

Мне нужно посмотреть атрибут из директивы и переключить функцию, когда значение равно true, это срабатывает при первом нажатии на нее, но мне нужно перезагрузить значение модели ATTRIBUTE/Attribute после ее оценки, и это та часть, которую я не могу понять.

DEMO ВЫПУСКА: https://jsfiddle.net/DG24c/200/

Желаемый результат будет иметь кнопку EXTERNAL ACCESS в моей демке всегда вызывает предупредительный метод.

шаблона:

<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

Попробуйте это:

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

Демо: 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

Вы не должны использовать атрибуты, как это, вы должны использовать сферу. Не совсем уверен, что твой комментарий // scope : true || {} cannot be used означает, что ... почему ты не можешь?

Это прекрасно работает при условии, вы на самом деле использовать связывание данных с областью, а не просто смотрит на атрибут: 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!'); 
     } 
    } 
    }; 
})