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

How can i toggle directive without using scope declaration

本文关键字：情况下 指令 声明 使用范围      更新时间：2023-09-26

我需要从指令中观察一个属性，并在值为真时切换一个函数，这是你第一次点击它，但我需要重置attribute/attribute模型的值，一旦它被评估，这是我无法弄清楚的部分。

DEMO OF ISSUE: https://jsfiddle.net/DG24c/200/

期望的结果是，在我的演示中，EXTERNAL ACCESS按钮总是触发alert方法。

模板:

<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!');
       }
    }
  };
})

试试这个:

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

你不应该使用这样的属性，你需要使用作用域。不太确定你的评论// 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!');
       }
    }
  };
})
相关文章：