如何在不使用範圍聲明的情況下切換指令

Question

我需要從指令中觀察屬性，並在值爲真時切換函數，第一次單擊它時會起作用，但是之後需要重置評估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!'); 
     } 
    } 
    }; 
})