Question

我需要使用ng-grid中的一组对象，这些对象的自定义样式看起来像一个标记（类似于此处的标记）。

我采用了使用cellTemplate的方法，并为此创建了一个自定义指令。

正在发生的事情是，当您排序时，其他列会发生变化，但“标签”会发生变化。列没有，它保持原样，就像指令没有得到更新。

这是我的指示：

app.directive('tag', function($compile){
   return {
   restrict: 'EA',
   link: function(scope, element, attrs) {
            attrs.$observe('tags', function(value) {
                var array = JSON.parse(value);
                var newHtml = '<ul>';

                for(var i=0;i<array.length;i++)
                {
                  newHtml += '<li>' + array[i].text + '</li>';
                }

                newHtml += '</ul>';

                var e = $compile(newHtml)(scope);
                element.replaceWith(e);

            });
         }
      }
 });

这是一个掠夺者：http://plnkr.co/edit/OxeUPaLLWtiCnvmgehnl

由于

Answer 1

不知道这是否符合您的所有要求，但您可以将标签指令更改为：

app.directive('tag', function($compile){
  var ddo = {
    restrict: 'EA',
    template: '<div><ul><li ng-repeat="tag in tags">{{tag}}</li></div>',
    scope: { tags: "=tags" }
    };
  return ddo;
});

或者如果你想保留你的代码，只需先改变DOM然后再编译它：

app.directive('tag', function($compile){
  var ddo = {
    restrict: 'EA',
    scope: { tags: "@tags" },
    link: function(scope, element, attrs) {
        attrs.$observe('tags', function(value) {
          var array = JSON.parse(value);
          var newHtml = '<ul>';

          for(var i=0;i<array.length;i++)
          {
            newHtml += '<li>' + array[i].text + '</li>';
          }

          newHtml += '</ul>';

          element.html(newHtml);
          $compile(newHtml)(scope);

        });
    }
  };

  return ddo;
});

编辑：此外，如果你想要做的只是改变布局，没有什么可以阻止你在cellTemplate中调用ng-repeat：

cellTemplate: '<ul><li ng-repeat="val in row.entity.arr">{{val}}</li></ul>'}

当范围变量在ng-grid中更改时更新指令？

1 个答案: