Angularjs ng-click不会更新视图

Angularjs ng-click doesn't update view

本文关键字：更新 新视图 ng-click Angularjs      更新时间：2023-09-26
myApp.controller( 'ModalNewInstanceCtrl', [ '$scope', '$modalInstance', function( $scope, $modalInstance ) {
$scope.tabSelected = 0;
$scope.saveFactor = function () {
    console.log('here');
    $scope.tabSelected = 0;
    console.log($scope.tabSelected);
};

那是我的控制器。

    <div class="modal-header">
    <div ng-click="tabSelected = 0">Tab 1</div>
    <div ng-click="tabSelected = 1">Tab 2</div>
    <div ng-click="tabSelected = 2">Tab 3</div>
</div>
<div class="modal-body">
    <div ng-show="tabSelected == 0">
        <h3>Some content 1 here</h3>
    </div><div ng-show="tabSelected == 1">
        <h3>Some content 2 here</h3>
    </div>
    <div ng-show="tabSelected == 2">
        <h3>Some content 3 here</h3>
    </div>
</div>
<div class="modal-footer">
        <button ng-click="saveFactor()">Save and return to tab 1</button>
        <a ng-click="tabSelected = 0">Cancel and return to tab 1</a>
    </div>
</div>

这就是我的html。我不知道为什么tabSelected更新视图在取消链接上直接更改ng-click="tabSelected = 0"但不在功能saveFactor()内更改。我知道由于控制台日志语句，该函数被正确调用。tabSelected也变了，但景色没有改变。我无法$scope.$apply()该函数，因为它给了我一个错误。

修改作用域变量
时更改 HTML 以使用函数.HTML：

<div class="modal-header">
<div ng-click="changeTab(0)">Tab 1</div>
<div ng-click="changeTab(1)">Tab 2</div>
<div ng-click="changeTab(2)">Tab 3</div>
...
<div class="modal-footer">
    <button ng-click="saveFactor()">Save and return to tab 1</button>
    <a ng-click="changeTab(0)">Cancel and return to tab 1</a>
</div>

.JS：

$scope.tabSelected = 0;
$scope.saveFactor = function () {
    console.log('here');
    $scope.tabSelected = 0;
    console.log($scope.tabSelected);
};
$scope.changeTab= function(tabNum){
    $scope.tabSelected = tabNum;
};
相关文章：