Javascript 监视不在$scope上的变量以更新在$scope上的变量

我正在尝试在我的

ng视图中创建一个迷你视图，方法如下：

<div ng-include="currentPage" />

问题是angular不知道
currentPageIndex
何时更改

因此，我尝试将
currentPageIndex
放在
$scope
上，就像
$scope.currentPageIndex
，但这仍然不能让angular知道
$scope.currentPage
应该更改

当我写这篇文章的时候，我在想也许这（下面）会奏效，但这真的是最好的解决方案吗

$scope.$watch('$scope.currentPageIndex', function(value) {
    $scope.currentPage = pages[$scope.currentPageIndex];
});

您可以观看任意函数：

$scope.$watch(function() { return currentPageIndex; }, function(newValue) {
  $scope.currentPage = pages[newValue];
});

但是，在Angular运行下一个摘要周期之前，该观察器可能不会运行。所以接下来你应该弄清楚什么改变了currentPageIndex。如果更改currentPageIndex的代码在Angular之外运行（例如响应DOM事件），则可以将其包装到
$scope.$apply（）
：

而不是写作

currentPageIndex++;

您可以编写一个函数来执行此操作并更新currentPage并调用它

$scope.setPageIndex = function(index){
currentPageIndex = index;
$scope.currentPage = pages[index];
};

$scope.nextPage = function() {
$scope.setPageIndex(currentPageIndex++);
}

或者，如果pages和currentPageIndex变量在作用域上，则可以直接绑定到ng include中的变量

<div ng-include="pages[currentPageIndex]" ></div>

您需要使用一个函数来定义ng include page（在我的示例中，我使用大写页面来引用常量）：

你的工作包括：

<div ng-include="getPage(page)"></div>



您可以通过一个功能示例看到我的plunkr：


我删除了“$scope”，然后它就为我工作了

<div ng-include="pages[currentPageIndex]" ></div>

$scope.getPage = function() {
    return PAGES[$scope.page];
}

<div ng-include="getPage(page)"></div>

$scope.$watch('currentPageIndex', function(value) {
    $scope.currentPage = pages[$scope.currentPageIndex];
});