angularjs - 如何检查是否已将表达式属性提供给指令？

Question

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

<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

然后 ng-show在 callbackButton
是否有任何替代方案不需要额外的线和范围属性？

Answer 1

如果您想避免将任何内容放入堆栈，则可以使用链接功能，您可以通过 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, element, attrs) {     
    if (attrs.callbackExpression) {
        var html = $templateCache.get('myDirective.html');
        element.replaceWith(html);
    }
}

确保注入(inject) $templateCache进入你的指令:

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

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

仅使用模板的选项:

要使用模板，您需要在作用域上添加一个变量。为此，您可以保留所有内容，只需添加:

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

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