Question

我需要从一个指令中观察一个属性，并且只要值为true就会切换一个函数，这在你第一次单击它时会起作用，但是我需要重置一次ATTRIBUTE / Attribute模型的值。评估，这是我无法弄清楚的部分。

期望的结果是让我的演示中的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>

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

2 个答案: