AngularJS 观察指令属性表达式，动态继承作用域

Question

我的代码很简单：

.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $timeout(function () {
      $scope.x = 5;
    }, 2000);
  }])
.directive('ngHey', ['$parse', function ($parse) {
    return {
      'restrict': 'A',
      'scope': true,
      'link': function($scope, el, atr) {

        var go = function () {
            if ($parse(atr.ngHey)()) {

              alert('oiiiiiii');
            }
          };

        atr.$observe('ngHey', function (val) {
          if (val) {

            go();
          }
        });
      }
    };
  }]);

//view.html

<div ng-controller="Ctrl">
<span ng-hey="x > 3"></span>
</div>

我希望能够在指令表达式发生变化以及它为真或假时触发，但目前警报从未发生...

只有当我做类似的事情时它才有效：

<div ng-controller="Ctrl">
    <span ng-hey="{{x > 3}}"></span>
    </div>

这不是我想要的，我希望指令执行 ng-if 或 ng-hide 等表达式...

感谢任何提示或帮助，谢谢

Answer 1

JSFIDDLE DEMO

由于 $timeout 稍后设置 x 的值，检查属性的指令中的条件总是返回 false。因此，每当 x 发生变化时，请使用 $watch 检查 go() 中的条件。

var myApp = angular.module('myApp',[]);

myApp.directive('ngHey', function () {
    return {
      'restrict': 'A',
       'scope': true,
      'link': function($scope, el, attr) {

        var go = function () {
            if ($scope.$eval(attr.ngHey)) {
              alert('oiiiiiii');
            }
          };

        $scope.$watch('x', function (val) {
          if (val) {
            go();
          }
        });
      }
    };
  });

而不是 $parse 使用 $scope.$eval 并且同样地而不是 $observe 使用 $watch.

Answer 2

在这种情况下您不能使用 $observe，因为它 Observes an interpolated attribute. (documentation)。在这种情况下，您可以像这样在作用域上使用 $watch：

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope: true,
            link: function($scope, el, atr) {

                var go = function(value) {
                    if (value) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch(atr.ngHey, function(val) {
                    if (val) {
                        go(val);
                    }
                });
            }
        };
    }
]);

演示： http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

UPD. 根据 OP 的评论，更新后的指令如下所示：

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope:{ngHey: '='},
            link: function($scope, el, atr) {

                var go = function(value) {
                    if ($scope.ngHey) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch('ngHey', function(val) {
                    if (val) {
                        go();
                    }
                });
            }
        };
    }
]);

注意，在这种情况下如何使用 $scope.ngHey，不需要 $eval 属性。

演示： http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

AngularJS 观察指令属性表达式，动态继承作用域

AngularJS observe directive attribute expressions, inherit scope dynamically

javascript

expression

angularjs

angularjs-directive

angularjs-scope