解决方案＃1：

Question

控制器

function MainController($scope, $rootScope, $location, $route) {
    $scope.EditMode = false;

    $scope.Click = function () {
        $scope.EditMode = !$scope.EditMode;
    };
}

HTML

<button ng-if="!EditMode" ng-click="$parent.EditMode = !$parent.EditMode">Button1</button>
<button ng-if="!EditMode" ng-click="EditMode = !EditMode">Button2</button>
<button ng-if="!EditMode" ng-click="Click()">Button3</button>

Button1 - 工作

Button2 - 不工作

Button3 - 工作

为什么Button2不起作用？

Answer 1

当您添加指令ng-if时，它会创建新范围。新范围与父范围具有相同的值。这就是为什么button1和button3有效。

Buttons2不起作用，因为当你执行EditMode = !EditMode时，它会在新范围内创建名为EditMode的新变量。

您有几种方法可以解决它。最简单的方法是将所有ng-if替换为ng-show

解决方案＃1：

<button ng-show="!EditMode" ng-click="$parent.EditMode = !$parent.EditMode">Button1</button>
<button ng-show="!EditMode" ng-click="EditMode = !EditMode">Button2</button>
<button ng-show="!EditMode" ng-click="Click()">Button3</button>

解决方案＃2：

将EditMode作为对象。保留ng-if这样，新范围不会覆盖父范围。

function MainController($scope, $rootScope, $location, $route) {
    $scope.EditMode = {value:false};

    $scope.Click = function () {
        $scope.EditMode.value = !$scope.EditMode.value;
    };
}

<button ng-if="!EditMode.value" ng-click="EditMode.value = !EditMode.value">Button1</button>
<button ng-if="!EditMode.value" ng-click="EditMode.value = !EditMode.value">Button2</button>
<button ng-if="!EditMode.value" ng-click="Click()">Button3</button>

Angular JS目前的范围是什么？

2 个答案:

解决方案＃1：

解决方案＃2：

更多信息：

解决方案＃1：

解决方案＃2：