angularjs – 如何检查是否已向指令提供表达式属性？

发布时间：2020-12-17 07:11:26 所属栏目：安全来源：网络整理

导读：我创建了一个接受回调作为属性的指令,例如： my-directive callback-expression="someFunction()" /my-directive 该指令是可重用的,因此我给它一个隔离范围.我想根据是否设置了callback-expression属性在指令中显示一个按钮. App.directive('myDirective',fu

我创建了一个接受回调作为属性的指令,例如：

<my-directive callback-expression="someFunction()"> </my-directive>

该指令是可重用的,因此我给它一个隔离范围.我想根据是否设置了callback-expression属性在指令中显示一个按钮.

App.directive('myDirective',function(){
  restrict: 'E',scope:    {
              callbackExpression: '&'
            },template: '<button ng-show="!!callbackExpression">Fire callback</button>'
});

问题是,即使表达式为空,它也是一个函数：

具有空白属性的console.log($scope.callbackExpression)导致：

function (locals) {
  return parentGet(parentScope,locals);
}

我目前的解决方案是将此行放在链接功能的顶部：

if (attributes.callbackExpression) scope.callbackButton = true

然后在callbackButton上显示ng-show

是否有任何替代品不需要额外的线和&范围财产？

解决方法

如果你想避免在堆栈上放任何东西,那么你可以使用链接功能,你可以通过attrs访问属性.以下是两种方法：

链接功能选项1：

您可以在指令中使用此链接函数而不是使用模板,该函数有条件地添加模板：

link: function (scope,element,attrs) {     
     if (attrs.callbackExpression) {
         var html = '<button>Fire callback</button>';
         element.replaceWith(html);
     }
}

选项1演示：http://jsfiddle.net/ZC4MZ/2/

链接功能选项2(更适合大型模板)：

对于大型模板,您可以使用$templateCache.首先添加模板：

myApp.run(function($templateCache) {
  $templateCache.put('myDirective.html','<button>Fire callback</button>');
});

然后有条件地使用它,就像选项1,但使用$templateCache.get()：

link: function (scope,attrs) {     
    if (attrs.callbackExpression) {
        var html = $templateCache.get('myDirective.html');
        element.replaceWith(html);
    }
}

确保将$templateCache注入到您的指令中：

myApp.directive('myDirective',function ($templateCache) {

这是使用$templateCache：http://jsfiddle.net/ZC4MZ/3/的演示

仅使用模板的选项：

要使用模板,您需要在范围上使用变量.为此,您可以保留所有内容,只需添加：

link: function(scope,attrs) {
      scope.callbackExpression = attrs.callbackExpression;}
}

模板/范围变量演示：http://jsfiddle.net/ZC4MZ/5/

（编辑：李大同）

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