Question

我想做的是这样的事情：

<rule-type-selector class="protractor-test-rule-description" all-rule-types="allRuleTypes" local-value="$parent.$parent.currentRuleDescription" on-selection-change="onSelectNewRuleType()" disabled="disabled">
</rule-type-selector>

并在指令中

  return {
    restrict: 'E',
    scope: {
      allRuleTypes: '&',
      localValue: '=',
      onSelectionChange: '&',
      disabled: '=' 
    },
    template: function($scope) {
      if($scope.disabled) {
        return '<input type="hidden" disabled>';
      }
      return '<input type="hidden">';
    }

这不起作用。无论是否设置了禁用，我总是按第二个返回语句。我看过Passing value of a variable to angularjs directive template function，但我的用例似乎有点不同。

Answer 1

问题是当template用作函数时，它会收到两个参数：element和attributes对象。目前还没有范围。

但是你可以在你的情况下做这样的事情：

template: function() {
    return '<input type="hidden" ng-if="disabled" disabled>' + 
           '<input type="hidden" ng-if="!disabled">';
}

因此，您使用ng-if指令根据scope.disabled属性有条件地呈现必要的字段。

Answer 2

您需要在指令的$compile函数中使用link服务。

你需要一个创建模板的函数（比方说：getTemplate），然后在你使用的链接函数中：

    element.html(getTemplate(parameter1, parameter2, ...));

然后：

        $compile(element.contents())(scope);

以下是应用示例： http://jsfiddle.net/hwndew2o/4/

将变量传递给指令模板

2 个答案: