在指令中使用更新的对象数组

时间:2017-07-04 12:32:48

标签: javascript angularjs arrays

在视图中,我在指令中使用ng-repeat来循环控制器中的对象数组。在此阶段期间,阵列内的对象会发生值更改。当我更改视图并创建同一指令的新实例时,我想再次遍历对象数组,但这次循环遍历更新的对象数组。

如果我在第一个视图中修改对象并在第二个视图中传递相同的对象数组,则该指令使用初始数组,而不是更新的数组。我尝试的是观察数组的变化,它看到了变化,但仍然在指令的第二个实例中它使用了初始数组。

有人可以解释发生了什么,我该如何解决?

1 个答案:

答案 0 :(得分:0)

您可以拥有一个简单的父子关系指令,其中指令可以访问控制器的范围,即添加它的视图。所以你可以在指令&中使用ng-repeat控制器范围变量中的数组。然后自动通过双向数据绑定来同步这些值。您可以按照我创建的以下插件进行操作。

这取决于你如何在控制器和放大器之间共享数据?指示。两个数据绑定有助于使其同步,您可以通过事件处理它或使用$ watch in指令(如果您在指令中使用jquery代码)。

https://plnkr.co/edit/m47TPgcX7lY8nL1LswCv?p=preview

app.directive('helloWorld', function ($compile, CarCompany) {
  return {
    restrict: 'E',
    template: '<div>\
                  <h2>HelloWorld directive</h2>\
                  <p ng-repeat="car in carc">{{car.name}}</p>\
                  <h3>Liste des marques:</h3>\
              </div>',
    link: function (scope, elem, attrs) {

      var ul = document.createElement('ul');
      var lis = '';
      angular.forEach(CarCompany, function(item) {
        lis += '<li>' + item.name + '</li>';
      });
      ul.innerHTML = lis;

      elem.append(ul);

      $compile(ul)(scope);
    },

  };
});

这是一个简单的指令,显示了控制器和放大器之间的共享范围。指示。 https://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/11/understanding-scopes-in-angularjs-custom-directives.aspx