包括和ngRoute:如何使他们一起工作？(即通过ng-include路由到视图)
编辑的我的应用程序有以下结构：
index.html
<body ng-app = "myApp" ng-controller ="mainController">
<ng-view></ng-view>
</body>mainView.html (通过app.js中的routeProvider加载到ng视图)
<div ng-include src="subview1">
<div ng-include src="subview2">在mainController (mainView的控制器)中将subview1和subview2设置为作用域变量：
$scope.subview1= "templates/subview1.html";
$scope.subview2= "templates/subview2.html";controller1和controller2是subview1和subview2的控制器。
subview1.html (加载在mainView的第一个div中)
<div ng-controller="controller1">
<button ng-click="loadNewView()"></button>
</div>controller1.js
.controller('controller1', function($scope){
$scope.loadNewView = function(){
$scope.$parent.subview1 = "templates/view3.html";
}
}scope.loadNewView应该使用src="subview1"在mainView.html).中在div中加载不同的视图(和相对控制器)。基本上，它是通过使用另一个视图(以及相关的控制器)刷新视图本身。
我使用$parent更新subview1的父视图(即mainView)中的视图。
但是，什么都没有发生，如果我尝试使用$scope.$apply()，就会得到错误(摘要已经在进行中)。
有线索吗？
回答 4
Stack Overflow用户
发布于 2015-04-27 18:07:46
你可以试试这样的..。在您的stateProvider或您的routeProvider中。
var mod = angular.module('example.states', ['ui.router']);
mod.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('exampleState', {
url: '/main',
templateUrl: 'mainView.html',
controller: mainController
});
}
]);
return mod;在这里，您已经将父控制器(比如mainController，它将是所有其他控制器的父控制器)与它的模板mainView.html关联起来。
然后在mainView.html中加载所有子视图模板。
<div ng-repeat="template in templates">
<ng-include src="template.url"></ng-include>
</div>模板是mainController中的一个数组，它具有使用ng的所有subtemplates.When的url或路径--在主模板中包含，那么所有subTemplates将自动成为mainTemplate及其控制器too.In的子级，这是它将从父控制器继承的方式。
因此，假设ng-include.Then中的子视图1.html是您给出的模板url之一，它将类似于
<div ng-controller="subView1Controller">
//Here your code
</div> 和subview2作为
<div ng-controller="subView2Controller">
//Here your code
</div> 这样，您将在同一个页面上拥有多个视图，其中包含一个url和不同的控制器及其相关模板，并且每个视图都将继承父控制器，即此处的mainController。
也许有比这更好的方法。这就是我在我的项目中所使用的，让您的代码保持简单的管理非常简单。
Stack Overflow用户
发布于 2015-04-27 20:03:49
好的，所以使用routeProvider，你可以像这样使用它
var app = angular.module("app",[]);
app.config(function($routeProvider){
$routeProvider
.when('/main',{
templateUrl:"mainView.html",
controller:mainController
})
});
app.controller("mainController",function($scope){
});
app.controller("subView1Controller",function($scope){
});
app.controller("subView1Controller",function($scope){
});然后在mainView.html，中加载所有子视图模板。
<ng-include src="yoursubtemplate1path"></ng-include>
<ng-include src="yoursubtemplate2path"></ng-include> 然后在yoursubtemplate1中使用
<div ng-controller="subView1Controller">
//Here your code
</div> 其他模板也是如此。
可以从mainController中设置子模板的模板src。
app.controller("mainController",function($scope){
$scope.templatesrc="/app/template1.html";
});然后在模板中使用它，在模板中使用ng-include指令。
<ng-include src="templatesrc"></ng-include>如果您正在加载更多的模板，最好将模板url存储在数组中并使用ng-重复指令，就像我以前说过的那样。
如果您想在某些按钮上显示div，请单击父控制器，然后在子视图中使用，并在单击按钮时使其成为真。
Stack Overflow用户
发布于 2015-04-29 19:19:50
这个答案是关于你最新的问题。
您以前使用过的解决方案将加载所有模板，并在ng中加载一次--包括及其相关控制器，将mainController作为父级。
但是，如果您想用它的newController加载一个不同的视图，那么您可以尝试这样的方法。
只需再添加一条路由并在事件单击时调用，但请记住，newView的controller将与mainView的控制器没有父-子关系。
var app = angular.module("app",[]);
app.config(function($routeProvider){
$routeProvider
.when('/main',{
templateUrl:"mainView.html",
controller:mainController
})
.when('/anyName',{
templateUrl:"templates/view3.html",
controller:temp3Controller
})
});在你的控制器1.js中
.controller('controller1', function($scope){
$scope.loadNewView = function(){
$location.path('/anyName');
}
}在controller1中注入定位服务。
https://stackoverflow.com/questions/29902322
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号