Question

我正在尝试制作网页的构造函数。这是plunker。我有标题，段落，列表等。我将它们从菜单中拖出来，然后将它们克隆并粘贴到dom中。与此类似layoutit.com。这就是克隆它们的方式：

app.directive('ironplayDraggableBox', ['$compile', function($compile) {
  return {
    link: function(scope, element, attrs) {
      $(element).draggable({
        connectToSortable: ".column",
        helper: function(){
          $new_el = $(this).clone().draggable({disabled: true});
          return $compile($new_el)(scope);
        },

        handle: ".drag",
        drag: function(e, t) {
            t.helper.width(400)
        },
        stop: function(e, t) {
          t.helper.attr('style', '');
        }
     });

    }
  };
}]);

我希望创建的每个元素都有一些选项按钮：文本对齐，颜色等。这个按钮改变了.view div中元素的类。我通过指令和jQuery来做。这里是元素的html代码：

<div class="box" ironplay-draggable-box>
        <a href="#close" class="remove label label-danger">
            <i class="glyphicon glyphicon-remove"></i> remove
        </a>
        <span class="drag label label-default">
            <i class="glyphicon glyphicon-move"></i> drag
        </span>

        <span class="configuration">
            <select name="align" ironplay-text-align>
                <option value="">Align</option>
                <option value="text-left">Left</option>
                <option value="text-right">Right</option>
                <option value="text-center">Center</option>
            </select>

            <select name="emphasis" ironplay-emphasis>
                <option value="">Emphasis</option>
                <option value="text-muted">Muted</option>
                <option value="text-primary">Primary</option>
                <option value="text-success">Success</option>
                <option value="text-info">Info</option>
                <option value="text-warning">Warning</option>
                <option value="text-danger">Danger</option>
            </select>
        </span>

        <div class="xpreview">Title</div>
        <div class="view">
            <h3 contenteditable="true">h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>

如何通过绑定来实现：

 <select name="align" ng-model="text-align">

并自动更新为班级名称：

<h3 contenteditable="true" class="{{text-align}}">h3. Lorem ipsum dolor sit amet.</h3>

如何使角度绑定适用于动态创建的dom项目？

0 个答案: