角和同位素-在同位素上下文中添加新项目

Question

更新:在@Marc的一些非常有洞察力的代码之后，我返回并清理了我的页面。结果，我把我的控制器倒排了(我的角度控制器在同位素控制器里面，而不是反过来)。一旦我把它改回来，清除了一些额外的脚本，它又开始工作了。我已经更新了代码片段以反映更改。多亏了马克和S.O！

我很难弄清楚如何使用角度添加新的项目，并且仍然让同位素管理他们的UI显示。

我正在使用同位素和角渲染服务器结果在砖石风格的布局。当我添加新的项目到布局的按钮点击，角添加它只是很好。然而，它们没有出现在同位素UI中，而是单独出现(不能使用同位素进行分类、布局或过滤)。

这是我的JS代码

    <!-- Define controller -->
    var contrl = app.controller("MainController", function($scope){
        $scope.items ={!lstXYZ}; //JSON data from server

//Function called by button click
        $scope.addItem = function(item)
        {
          $scope.items.push(item);
          $scope.item = {};
        }
    });

    contrl.$inject = ['$scope'];

下面是显示服务器结果的HTML .(更新以显示工作的code..refer注释)

<div ng-controller="MainController">
 <div class="isotope" id="isotopeContainer">
      <div ng-repeat="item in items">        
        <div class='element-item {{item.status}}' data-category='{{item.status}}'>
          <p class="number">{{item.type}}</p>
        </div>
      </div>
    </div>
  </div>

下面是我添加新项目的HTML按钮

  <table>
    <tr>
      <td><input type="text" ng-model="item.status" /></td>
    </tr>
    <tr>
      <td><input type="text" ng-model="item.type" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
    </tr>
  </table>

我不知道如何确保同位素能够识别新添加的元素并重新绘制布局。

任何帮助或指示将是非常感谢的。谢谢!

Answer 1

在这种情况下，我的代码写得不正确。我已经更新了问题的代码，但想在这里更清楚地提到.

显然，角度的优点在于您不需要考虑底层的UI框架(在本例中是同位素)。只要您更新角数据数组，UI绑定就会自动更新。

唯一的缺点是确保UI框架div在您的角度div的上下文中。

这是不工作的code...Note，同位素div在角控制器之外.

   <div class="isotope" id="isotopeContainer">
    <div ng-controller="MainController">

          <div ng-repeat="item in items">        
            <div class='element-item {{item.status}}' data-category='{{item.status}}'>
              <p class="number">{{item.type}}</p>
            </div>
          </div>
        </div>
      </div>

这是在角控制器上下文中运行同位素的更新代码..。

    <div ng-controller="MainController">
     <div class="isotope" id="isotopeContainer">
          <div ng-repeat="item in items">        
            <div class='element-item {{item.status}}' data-category='{{item.status}}'>
              <p class="number">{{item.type}}</p>
            </div>
          </div>
        </div>
      </div>

希望这能有所帮助。我感谢所有的回应和帮助，我从中得到。感谢你的学习机会。

Answer 2

ng-repeat负责为您将新元素添加到DOM。然而，同位素并没有为您做任何“监视”-您必须手动调用容器的重绘。

您可以直接将类似$("#isotopeContainer").isotope(...)的内容添加到控制器中，但本着保持控制器不受DOM相关代码影响的精神，您应该创建一个服务。类似于：

myApp.service('Isotope', function(){

  this.init = function(container) {
    $(container).isotope({itemSelector: '.element-item'});
  };

  this.append = function(container, elem) {
    $(container).isotope('appended', elem);
  }

});

..。其中，第一个方法初始化一个新的同位素容器，下一个方法在附加项之后重新绘制容器。

然后，您可以将此服务注入到任何控制器或指令中，但指令可能是此场景的最佳选择。在这个柱塞中，我创建了两个新的指令:一个用于同位素容器，另一个用于异构体元素，并使用该服务进行初始化和重绘。