Question

在我的HTML中，我有一系列标签，可以更改部分内容，如下所示：

        <ul class="nav nav-tabs">
            <li
                ng-repeat="project in projects"
                ng-class="currentProject==$index?'active':''">
                <a ng-click="setProject($index)"    >{{project.title}}</a>
            </li>
        </ul>

        <h2>{{project.title}}</h2>
        <ul class="nav nav-tabs">
            <li ng-class="getPage()=='/project/status' ?'active':''"><a ng-href="#/project/status"  >Résumé</a></li>
            <li ng-class="getPage()=='/project/graphs/burndown' ?'active':''"><a ng-href="#/project/graphs/burndown"    >Graphe RÀF</a></li>
            <li ng-class="getPage()=='/project/details'?'active':''"><a ng-href="#/project/details" >Liste détails</a></li>
        </ul>

        <!-- partial content -->
        <section id="partial" ng-view></section>

在我的控制器中我有：

$scope.setProject = function(id) {
    $scope.currentProject = id;
    $scope.project = $scope.projects[id];
    //$scope.$apply($scope.project);
}

我面临的问题是，当我通过点击其中一个第一个标签来切换当前项目时，尽管在HTML中更新了{{}}，但部分本身并未更新。我怀疑我必须在某些方面打电话给$ apply，但我很困惑：在哪里以及如何？正如你在控制器方法setProject（）中看到的那样，我没有成功地运行了一些测试。

[更新]小提琴：http://jsfiddle.net/stephanedeluca/Zk2qa/21/

Answer 1

您的示例的问题是您在控制器中调用$scope.setProject(0)。所有模板都使用相同的控制器，当您导航到新路径时，控制器再次运行并将项目重置为0（如果您在导航时观察控制台，则可以看到这种情况发生）。取出$scope.setProject(0)，它应该有效。实际上，您的每个模板可能都有一个单独的控制器，就像您的顶级导航一样。

更新

回答下面的问题。我自己仍然在学习Angular而且绝不是专家，所以我带着一丝一切地说出我所说的一切。

控制器基本上是视图背后的大脑。它准备数据，并处理接口逻辑。用户与视图接口，视图与控制器接口，与应用程序的其余部分接口。

在您的情况下，您有三个视图都使用相同的数据。但是他们做了不同的事情（即使他们做的不同就是以不同的方式显示相同的数据）。每个视图都有不同的目的，每个视图应该有不同的大脑/控制器。也许一个视图有一个可排序的网格，另一个视图有一个用于生成pdf的按钮（如果它们现在没有，也许它们将在下个月）。您不希望将所有视图的所有逻辑混合在一起。它将变得一团糟，难以使用。

有几种方法可以让您的控制器可以使用您的数据。如果您的数据在客户端上是自包含的（听起来就像在您的情况下那样），您可以将其填充为值或常量，如下所示：

app.constant('projects', [
{   id: 0,
    name: 'Proj1',      
    title: 'First project',
    description: ['First project description']
},
{   id:0,
    name: 'Proj2',      
    title: 'Second project',
    description: ['Second project description']
}
]);

甚至只是将其分配给$ rootScope。这可能会很好，但它确实感觉不对。有一天，您可能决定要从远程服务器加载数据。将数据访问权限放入服务可能更有意义。

app.service('dataService', function(){
    return{
        getData: function(){
            return  [
                {   id: 0,
                    name: 'Proj1',      
                    title: 'First project',
                    description: ['First project description']
                },
                {   id:1,
                    name: 'Proj2',      
                    title: 'Second project',
                    description: ['Second project description']
                }
            ];
        }
    };
});

此处，服务返回getData函数，该函数返回您的项目列表。现在，它只返回硬编码的项目数组，但你也可以在那里放一个$ http调用来从服务器的某个地方提取数据。如果您决定某天进行更改，则不必更改控制器中的一堆代码，因为他们可以访问的所有代码都是getData，并且他们不关心数据的来源。< / p>

您的控制器还需要知道选择了哪个项目，因此使用服务也是有意义的。这是我的navService：

app.service('navService', function(){
    selectedProject = {};
    return {
        getProject: function(){        
            return selectedProject;
        },

        setProject: function(project){
            selectedProject = project;
        }
    };
});

它只是跟踪选择了哪个项目，并提供了getter和setter函数。

这是Fiddle。

希望一切都有意义。如果我写的任何内容不正确，我会鼓励任何人纠正我。

如何修复我的部分，以便在模型更新时更新？

1 个答案:

更新