代码之家 › 专栏 › 技术社区 › itsme

AngularJS观察指令属性表达式,动态继承范围

expression angularjs-scope angularjs-directive angularjs javascript

itsme · 技术社区 · 11 年前

我的代码很简单:

.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();
          }
        });
      }
    };
  }]);

//视图.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等的表达式。。。

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

2 回复 | 直到 11 年前

dfsq 11 年前

您不能使用 $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

更新。 根据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

mohamedrias 11 年前

JSFIDDLE DEMO

作为 $timeout 正在稍后设置x的值,检查属性的指令中的条件返回 false 总是所以使用 $watch 检查中的条件 go() 无论何时 x 变化。

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 使用 $手表 .

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前