如何在不使用范围声明的情况下切换指令

Question

我需要查看指令中的属性，并在值为 true 时切换功能，这在您第一次单击它时有效，但我需要重置 ATTRIBUTE/Attribute 模型的值评估，这是我无法弄清楚的部分。

问题演示：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

您不应该使用这样的属性，您需要使用范围。不太确定你的评论 // 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!');
       }
    }
  };
})

Answer 2

试试这个：

$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>