我有一种情况,我有一个 Angular Controller ,它基本上只是根据点击事件加载 html 模板。然而,这些模板由它们自己的 Controller 控制。这会导致 Controller 位于原始 Controller 内部,这似乎是错误的:
<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>
我的问题是,在不引起范围冲突的情况下,我想要做的事情的最佳解决方案是什么?
最佳答案
所以,我实际上认为你的方法是正确的。我将此基于 AngularJS 文档 controllers (“演示”部分显示了一个简单的嵌套 Controller 层次结构)。
此外,这看起来与 form 指令的工作方式非常相似。它为表单本身创建一个范围,评估整个表单的 $pristine、$dirty、$valid 和 $invalid。仅当所有子作用域的计算结果都为 true 时,这些值才为 true(换句话说,只有当所有输入都返回为 $valid 时,表单才为 $valid)。这是通过嵌套作用域层次结构完成的,因此如果 Angular 以基本方式执行此操作,那么应用程序也可以类似地执行此操作。
关于angularjs - Angular ng-将 Controller 包含在另一个 Controller 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21150956/