Question

我正在使用AngularJS和UI-Router，并有一个链接列表，我想根据点击哪一个更改下面的视图。

现在点击该值本身会发生完美变化，但点击时视图不会改变。

这是州定义

.state('home.person', {
            cache: false,
            url: '/person',
            params: {
                personIndex: null,
                personID: null
            },
            views: {
                'mainContent@home.person': {
                    templateUrl: 'app/person/person.html',
                    controller: 'personController'
                },
                'interviewForm@home.person': {
                    template: "interviewform!"
                },
                'employmentDetails@home.person': {
                    template: "employmentDetails!"
                },
                'skills@home.person': {
                    template: "skills!"
                }
            }
        })

HTML

<div class="sub-tabs">
    <ul>
        <li><a href="" ng-click="setSubTab('interviewForm')">Interview Form</a></li>
        <li><a href="" ng-click="setSubTab('employmentDetails')">Employment Details</a></li>
        <li><a href="" ng-click="setSubTab('skills')">Skills</a></li>
    </ul>
</div>

<pre>{{currentSubTab()}}@home.person</pre>

<div ui-view="{{currentSubTab()}}@home.person"></div>

我把pre放在那里，以便我可以轻松监控值的变化

控制器设置/获取当前子选项卡

var _currentSubTab = "interviewForm";  // Default
$scope.setSubTab = function (val) {
        _currentSubTab = val;
    };
    $scope.currentSubTab = function () {
        return _currentSubTab;
    };

它正确默认为并显示interviewForm。如果我单击“雇佣详细信息”链接，则值确实会更改，但视图本身不会更新！如果我将默认值更改为employmentDetails，那么它会正确显示该视图，但再次单击不会更改。

我尝试过添加缓存：false但是没有修复它
我尝试在$ scope中包装回报。$ apply但我得到摘要错误
我已经尝试过如你所见的使用getter / setter函数，或者只是使用直接的$ scope值并直接在ng-click中设置但是也没有工作< / p>
1）如何以编程方式更新子视图？

更新

正如Jase在下面提到的，我知道我可以通过将所有这些打破到他们自己的状态来做到这一点。我希望在不更改状态的情况下完成此功能以更新子选项卡视图。

以编程方式更改ui-view值而不更新视图本身

0 个答案: