Question

所以我有一个应用程序应该采用包含不同自定义指令的一个页面的html。

还有另一个页面，它将加载第一页的html，并根据第一页中存在的自定义指令（cms-input）的编号和指定的类型生成输入字段。

所以例如这里是第一个html页面

<cms-input type='text' size='14' default='header' label='Header' ></cms:input>

<cms-input type='textfield' size='50' default='paragraph' label='Paragraph'> </cms:input>

第二页应加载第一页并生成字段：

<label>Header</label>
<input type='text' value='header'>
<label>Paragraph</label>
<textarea>paragraph</textarea>

Answer 1

这是针对什么指令设计的，重点是找出传递和评估字段属性的最佳方法，在plnkr中我做了一个可能的解决方案。

这里有一个起点： PLNKR

＆＃13;

app.directive('cmsInput', function() {
  return {
    restrict: 'E',
    template: '<label ng-if=(exists(label))>{{label}}</label>',
    controller: function($scope) {
      $scope.exists = function(a) {
        if(a && a.length>0) {
          return true;
        }
        return false;
      }
    },
    link: function(scope, elem, attr) {

      scope.label = attr.label;
      
    }
    
  }
  
})

＆＃13;

这需要工作，但你明白了。

编辑：您可以使用＆＃39;范围＆＃39;绑定值的指令字段，但为了找到解决方案，我希望尽可能清楚。

EDIT2： Angular指令正在定义一个规则＆＃34; camelCase＆＃34;在javascript（指令名称）是eaxctly＆＃34; camel-case＆＃34;在html中，作为指令调用。

Angular匹配将js代码更正为被调用的指令，并将完全放在DOM中的那个位置作为模板。链接方法的一个参数是属性，这些属性与html中的值相同，因此在：＆＃39; attr.label＆＃39;你得到了＆＃39;标签＆＃39;在html中，在这种情况下字符串＆＃34;标题＆＃34;。

指令的模板属性是一个字符串，其中包含在范围内设置的变量的bindigs，当我们将它们组合在一起时，我们得到：

Angular＆＃34;发现＆＃34;指令
指令代码正在被解雇
正在调用链接函数 - 我们在其中设置名为＆＃34; label＆＃34;名为＆＃34; label＆＃34;
模板编译 - 在{{}}标记下正在设置正确的变量。
vio＆＃39; la - 代替这个cms-input元素，你得到正常的html

生成不同的字段取决于angularjs中的DOM元素

1 个答案: