Question

我试图通过这样的方式在ng-view内创建迷你视图：

<div ng-include="currentPage" />

然后我的控制器看起来像这样

var currentPageIndex = 0;
var pages = ['page1.html','page2.html'];

$scope.currentPage = pages[currentPageIndex];
$scope.nextPage = function() {
    currentPageIndex++;
}

问题在于，角度不知道currentPageIndex何时发生变化。

所以，我尝试将currentPageIndex放在$scope上，就像$scope.currentPageIndex一样，但仍然没有让角知道$scope.currentPage应该$scope.$watch('$scope.currentPageIndex', function(value) { $scope.currentPage = pages[$scope.currentPageIndex]; });变化

在我写这篇文章的时候，我认为这可能会在下面发挥作用，但它真的是最好的解决方案吗？

{{1}}

Answer 1

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

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

和你的包括：

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

你可以通过一个功能性的例子来看我plunkr：

http://embed.plnkr.co/UyA0fjX5eponD7XQI8Yj/preview

Answer 2

您可以观看任意功能：

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

但是这个观察者可能无法运行，直到Angular运行其下一个摘要周期。所以接下来要弄清楚的是更改currentPageIndex的内容。如果更改currentPageIndex的代码在Angular之外运行（例如，响应DOM事件），则可以将其包装在$scope.$apply()中：

$scope.$apply(function() { currentPageIndex = newValue; });

Answer 3

而不是写

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>

Answer 4

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

我删除了＆＃39; $范围＆＃39;然后它对我有用。

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

4 个答案: