在ng-repeat中移动模板时保留范围值

时间:2014-08-01 07:04:16

标签: angularjs angularjs-scope angularjs-ng-repeat angularjs-ng-include

我有两个绑定到ui的集合,通过ng-repeat

填充

我已经加入了ng-include="template.html"

<div>
  <div ng-repeat="item in items1">
    <ng-include src="item.template"></ng-include>
   </div>
</div>

<div>
   <div ng-repeat="item in items2">
     <ng-include src="item.template"></ng-include>
   </div>
</div>

我的模板如下所示

<script type="text/ng-template" id="template1.html">
    <div ng-controller="controller1"> <input ng-model="a"/></div>
</script>

在我的控制器中就像下面的

myApp.controller("MainCtrl", function ($scope) {
    $scope.items1 = [];
    $scope.items2 = [];

    var item1 = {
        name: "1",
        template: "template1.html"
    };
    var item2 = {
        name: "2",
        template: "template2.html"
    };
    var item3 = {
        name: "3",
        template: "template3.html"
    };

    $scope.items1.push(item1);
    $scope.items1.push(item2);
    $scope.items1.push(item3);

    $scope.reAddItem = function () {
        $scope.items2.push($scope.items1.pop());
    }
});

和模板中引用的另一个控制器如下所示

myApp.controller("controller1", function ($scope) {
    console.log("Initialized");
    $scope.a = 'hello';
});

现在我想在将项目从一个集合移动到另一个集合时保留控制器范围变量,(如果我在输入框中输入了一些值,当移动集合时,范围值应该保持相同),但是角度总是创建一个在ng-repeat中重新添加模板时,新范围并销毁先前的范围值。

但是我不想要那个并且在移动集合时保留相同的模板,那么我该怎么做呢?

fiddle

在上面的小提琴中,如果我在输入框中更改某些内容并将其移动到另一个集合中,我需要相同的范围变量

1 个答案:

答案 0 :(得分:0)

正如有人评论了this might工作

之类的内容
var item1 = {
    name: "1",
    hoo:'asdfasdf',
    template: "template1.html"
};
var item2 = {
    name: "2",
    hoo:'adddddddsdfasdf',
    template: "template2.html"
};
var item3 = {
    name: "3",
    hoo:'asdfasdffffffffffff',
    template: "template3.html"
};

<script type="text/ng-template" id="template2.html">
   <div ng-controller="controller2"> <input ng-model="item.hoo"/></div>
</script>