为什么视图的控制器加载了两次？

Question

请检查this plunk我在下面解释的问题。

当您运行插件时，您会发现有某些标签。第一个标签Home属于home州。其余选项卡属于category状态，每个选项卡由类别ID标识。

当我当前在Home标签上并点击其他标签时，CategoriesController只会按预期调用一次。但是当我从那里点击其他选项卡时，CategoriesController被多次调用，一次用于上一个选项卡，两次用于新选择的选项卡。请运行plunker并观察浏览器控制台以更好地理解它。

我不知道为什么也会为之前的标签调用控制器。任何帮助，将不胜感激。

Answer 1

不确定多次调用控制器的原因。我想弄清楚问题，但在此之前你可以做到以下几点：

1. 从状态配置中删除controller: "CategoriesController"
2. 将ng-controller="CategoriesController"添加到ui-view="categories"元素

这只适用于那个视图 - ＆gt;将调用激活的控制器。

修改

遇到问题，您在每个标签中都有ui-view="categories"，因此n个ui-view的{​​{1}}个n正在为<div class="flex"> <div class="first"> <label class="group"> <input name="sg-a" type="radio"> <p>Ganjil - Genap 2D</p> </label> <label class="group"> <input name="sg-a" type="radio"> <p>Besar - Kecil 2D</p> </label> <label class="group"> <input name="sg-a" type="radio"> <p>Tengah - Tepih 2D</p> </label> <label class="group"> <input name="sg-a" type="radio"> <p>Kombinasi 2D</p> </label> </div> <div class="second"> <label class="group"> <input name="sg-a" type="radio"> <p>SHIO</p> </label> <label class="group"> <input name="sg-a" type="radio"> <p>Over / Under</p> </label> <label class="group"> <input class="jitu" name="sg-a" type="radio"> <p>Colok Jitu</p> <select disabled> <option>As</option> <option>Kop</option> <option>Kepala</option> <option>Ekor</option> </select> </label> <label class="group"> <input name="sg-a" type="radio"> <p>4D</p> </label> </div> <input type="submit" value="Cari Data"> </div> 个标签提供。{/ p>

现在实际发生了什么，为了提供幻灯片动画，Angular材料也保留了DOM中的左右选项卡。

因此，当您从Home（即第一个选项卡）单击到另一个选项卡时，它工作正常。但是当你从任何其他标签（第一个标签除外）出发时，它分别是左边和右边的标签。由于需要执行滑动效果，因此右侧选项卡也会生效。

Answer 2

你正在更改seletedTab和CategoriesController $观察者的$stateChangeStart值。但同时你正在使用ui-view ng-if需要seletedTab $stateChangeStart作为参数。

说当前你在标签0上，并切换到标签1.事情是这样的：

1. 首先，你的状态更改开始。在selectedTab观察者中，ui-view设置为1.

2. 标签0中的ui-view已从DOM中删除。

3. 选项卡1中的CategoriesController被添加到DOM，但是当前$ stateParams.catID仍为0.这样，它启动了seletedTab $ stateParams.catID = 0 。同时，它将ui-view设置为0. 这是以前控制器的第一次调用

4. 标签1中的ui-view已从DOM中删除，标签0中的ui-view已添加到DOM。

5. 然后你的$ state改了成功。标签0中的CategoriesController位于seletedTab且$ stateParams.catID = 1，并将ui-view设置为1. 这是下次控制器的第一次调用 < / p>

6. 现在好了，标签0中的ui-view被移除，标签1中的CategoriesController再次添加到DOM，最后用$ stateParams.catID = 1进入e.target.style.innerHTML 一切看起来都不错。 这是下一个控制器的第二次调用

希望我说清楚。