加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 指令中的调用控制器方法适用于范围,但不适用于attr

发布时间:2020-12-17 17:00:42 所属栏目:安全 来源:网络整理
导读:我想在指令完成DOM中的更改之后调用控制器的方法,但是它没有工作,所以我在指令中发送该方法,在范围内调用.$watch .directive('checkThis',function($timeout) { return { restrict: 'E',scope: { myData: '=',dirty: '=',what: '@',callback: '' },link: fun
我想在指令完成DOM中的更改之后调用控制器的方法,但是它没有工作,所以我在指令中发送该方法,在范围内调用.$watch

.directive('checkThis',function($timeout) {
    return {
        restrict: 'E',scope: {
            myData: '=',dirty: '=',what: '@',callback: '&'
        },link: function(scope,element,attrs) {
            scope.$watch('myData',function(newValue,oldValue) {
                if (newValue !== oldValue) {
                    if (newValue) {
                        scope.dirty++;
                    } else { 
                        scope.dirty--;
                    }
                    check();
                }
            });

            var check = function () {
                if (angular.isDefined(scope.callback)) {
                    $timeout(function() {
                        console.log('being called');
                        scope.callback();
                    },false);
                }
            };
        }
    };
});

并在HTML中使用此指令,如下所示

<check-this my-data="vm.encryption" dirty="vm.dirty" what="column" callback="vm.checkAll()"></check-this>

现在当我使用attrs.callback它没有被执行但是执行scope.callback(),即使我检查attrs.callback它在控制台中显示方法.

为什么会这样呢?

即使我尝试了范围.$eval(attrs.callback)和

scope.$apply(function() { 
    scope.$eval(attrs.callback); 
 });

但它没有被调用.我正在参考this article

解决方法

Angular指令attrs是字符串,因此在示例中调用attrs.callback是字符串’vm.checkAll()’.使用$eval可以工作,但不建议这样做,因为它可能对您的应用程序的安全性有害.

解决方案是使用scope.callback(),有什么理由你不想使用它吗?

如果由于某种原因你绝对需要使用attrs.callback,你可以使用scope.$parent.$eval(attrs.callback);或eval(‘scope.$parent.’attrs.callback),因为这些将评估父作用域中的vm.checkAll().

范围.$eval(attrs.callback)将无法工作,因为您的指令使用隔离范围.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读