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

angular and isotope - Adding new item within isotope context

本文关键字：同位素 添加 上下文 新项目      更新时间：2023-09-26

更新:在@Marc Kline写了一些非常有见地的代码之后，我回去整理了一下我的页面。结果发现我的控制器是反向排列的(我的角度控制器位于同位素控制器内部，而不是相反)。一旦我把它改回来，并清理了一些额外的脚本，它又开始工作了。我已经更新了代码片段以反映更改。谢谢Marc和S.O!

我有麻烦弄清楚我如何使用Angular添加新项目，仍然让同位素管理他们的UI显示。

我使用同位素和角渲染服务器结果在砖石风格的布局。当我在点击按钮的布局中添加新项目时，angular会很好地添加它。但是，它们不会出现在同位素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…(更新以显示工作代码…请参阅注释)

<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>

我不确定如何确保同位素能够识别新添加的元素并重新激活布局。

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

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);
  }
});

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

你可以把这个服务注入到任何控制器或指令中，但在这种情况下，指令可能是最好的。在这个Plunker中，我创建了两个新指令:一个用于同位素容器，另一个用于Isotype元素，并使用该服务进行初始化和重绘。

在这个特殊情况下，我的代码没有正确编写。我已经更新了问题的代码，但想在这里更清楚地提到它…

显然，Angular的美妙之处在于你不需要为底层UI框架操心(在这个例子中是同位素)。只要你更新了Angular的数据数组，UI绑定就会自动更新。

唯一的问题是要确保UI框架的div是在你的Angulardiv的上下文中。

这是不工作的代码…请注意，同位素div位于Angular控制器之外。

   <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>

下面是在Angular控制器上下文中运行同位素的更新后的代码…

    <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>

希望这对你有帮助。我很感谢所有的回应和帮助我从SO。珍惜这次学习的机会。

相关文章：