Question

我正在构建一个自定义指令，它将根据属性值显示不同的HTML元素。

例如

   <my-directive show="text" value="123" /> <!-- this displays a text box -->
   <my-directive show="boolean" value="true" /> <!-- this shows a checkbox -->

我试图使用compile函数只添加必要的DOM元素。如果我将show和value的值指定为文本，则一切正常，但是当我尝试通过角度表达式设置它们时，它不起作用。

例如

   <my-directive show="myObject.type" value="myObject.value" />

如何使我的编译函数可以使用角度表达式的结果。

.directive('myDirective', function() {
    return {
      restrict: 'E',
      compile: function(el, attrs) {
      if (attrs.show == 'text')
        el.replaceWith(textTemplate)
      else if (attrs.show == 'number')
        el.replaceWith(numTemplate)
      else if (attrs.show == 'boolean')
        el.replaceWith(boolTemplate)
      else if (attrs.show == 'timezone')
        el.replaceWith(tzTemplate)
      else if (attrs.show == 'datetime')
        el.replaceWith(dtTemplate)
      else if (attrs.show == 'date')
        el.replaceWith(dateTemplate)
      else if (attrs.show == 'time')
        el.replaceWith(timeTemplate)
      else
        console.log("no input type matched "+attrs.show);  // this always fires, with value 'myObject.type'

      },
      link: function() { .... }
 }

Answer 1

在点击链接函数之前，您无权访问元素属性和范围，以便能够将表达式解析为范围上的值。

Answer 2

这是一个可以使用directives isolate scope的地方的完美示例。创建隔离范围有另一个主要特性，它将使指令更易于重用。

directive('myDirective', function() {
return {
  restrict: 'E',
  scope: {
    show: '=show',
    value: '=value'
  },
  compile: function(el, attrs) {
       if ($scope.show === 'text'
       ...

在angularjs指令的编译函数中计算表达式

2 个答案: