Question

我有一种情况，我有一个Angular控制器，它基本上只是根据点击事件加载html模板。但是，这些模板由自己的控制器管理。这导致控制器内部原始控制器，这似乎是错误的：

<div ng-controller="WindowCtrl" id="focus-window">

    <button ng-click="openProjects()">Show Projects</button>
    <button ng-click="openTasks()">Show Tasks</button>
    <div ng-include src="template.url"></div>

</div>

controllers.js

.controller('WindowCtrl', function ($scope) {
    $scope.templates = [
        {
        name: 'tasks',
        url: 'partials/_tasks.html'},
    {
        name: 'projects',
        url: 'partials/_projects.html'}
    ];
    $scope.template = $scope.templates[0];

    $scope.openProjects = function() {
        $scope.template = $scope.templates[1];
    };
    $scope.openTasks = function() {
        $scope.template = $scope.templates[0];
    };
});

_projects.html

<div ng-controller="ProjectsCtrl">
  <h2>My Projects</h2>
  ...            
</div>

_tasks.html

<div ng-controller="TasksCtrl">
  <h2>My Tasks</h2>
  ...            
</div>

我的问题是，在不造成范围冲突的情况下，我尝试做什么的最佳解决方案是什么？

Answer 1

所以，我认为你的方法是正确的。我基于controllers的AngularJS文档（“Demo”部分显示了一个简单的嵌套控制器层次结构）。

此外，这看起来与form指令的工作方式非常相似。它为表单本身创建了一个范围，为整个表单评估$ pristine，$ dirty，$ valid和$ invalid。这些值仅在其所有子范围都评估为true时才为真（换句话说，如果所有输入都返回为$ valid，则表单只有$有效）。这是通过嵌套的作用域层次结构完成的，因此如果Angular以一种基本方式进行，那么应用程序可以类似地执行此操作。

Angular ng-include控制器位于另一个控制器内

1 个答案: