javascript - AngularJS 不解析从指令动态加载的数据

Question

我试图根据从属性传入的数组(其中 N 是数组的长度)从指令动态创建 N 个 Select 控件。

数组对象的结构如下:

selectDescription = {
    array: arrayObject, //ng-options, a string as 'item as item.name for item in selectArray[0]'
    change: methodName, //ng-change, actionname
    level: levelNumber //level number
}

因此，span 标记内的选择控件数量取决于我从属性中获取的selectDescription(s)数量。

第一个选择控件已成功呈现。后续选择控件应该在从先前呈现的选择控件中选择选项时呈现。 但在我的例子中并没有发生。尽管我成功地在当前 inputEl 中附加 Angular 元素(在选择选项时)，但它并未在 UI 中呈现。我想我错过了一些非常重要的东西。

更改 selectDescriptions 时，会设置一个翻转属性，通过该属性我可以从链接调用 scope.$editable.render() ，该链接又运行清除 span 中之前的 HTML 后，渲染函数重新附加元素。

我的代码:

app.directive('editableLocation', function(editableDirectiveFactory) {  
    var createElement = function(el, index){
      var newElement = angular.element("<select/>");
      newElement.attr('ng-model','$data'+index);
      newElement.attr('ng-options',el.array);
      newElement.attr('ng-change',el.change.substring(0, el.change.length - 1)+", $data"+index+")");
      return newElement;
    }

var descriptions = [] ;
var dir = editableDirectiveFactory({
  directiveName: 'editableLocation',
  inputTpl: '<span></span>',
  render: function() {
    this.parent.render.call(this);
    this.inputEl.html("");
    for(var i = 0 ; i < descriptions.length ; i ++){
      this.inputEl.append(createElement(descriptions[i], i));
    }
  }
});
var linkOrg = dir.link;

dir.link = function(scope, el, attrs, ctrl) {
   console.log(el);
   descriptions = scope.$eval(attrs.description);
   scope.$watch('flipped',function(newValue,oldValue){
        if(newValue != 0){
            scope.$editable.render();
        }
    });
    return linkOrg(scope, el, attrs, ctrl);
};

return dir;
});

Answer 1

由于您在 Angular 指令的 link 函数中添加动态 HTML 内容，Angular 将不会自动编译/解析它。您需要使用 $compile 指令手动执行此操作。因此，在附加所有 HTML 后，请执行以下操作(在代码中注入(inject) $compile)

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

其中 element 是您要在其中生成动态 HTML 的任何父元素，scope 是指令的范围或您希望将其附加到的任何其他范围动态 HTML。