AngularJS - ng-include 不适用于 ng-view [英] AngularJS - ng-include doesn't work on ng-view
问题描述
我有一个功能可以在点击时包含 html 文件.问题是它在 ng-view 下(使用 $routeProvider)不起作用，而在 ng-view 之外它工作正常.我怀疑将包含函数从控制器转移到服务可能会有所帮助，但我不确定如何做到这一点，因为我是 Angular 的新手.
HTML 工作时:
<ng-include src="'views/main.html'" ng-controller="mainCtrl"></ng-include>HTML 不起作用时:
<div ng-view></div>main.html:
<button ng-click="include('temp1.html')">块 1</button><i ng-click="delete('temp1.html')">DEL 1</i><button ng-click="include('temp2.html')">块 2</button><i ng-click="delete('temp2.html')">DEL 2</i><button ng-click="include('temp3.html')">块 3</button><i ng-click="delete('temp3.html')">DEL 3</i><div ng-repeat="模板中的模板"><div ng-include="template.url">块中的内容放在这里</div>APP.js:
角度.module('MyApp', ['ngResource','ngRoute','ui.bootstrap']).config(function ($routeProvider) {$routeProvider.什么时候('/'， {templateUrl: 'views/main.html',控制器:'mainCtrl'}).when('/关于', {templateUrl: 'views/about.html',控制器:'关于Ctrl'}).除此以外({重定向到:'/'});});mainCtrl:
angular.module('MyApp').controller('mainCtrl', function ($scope) {$scope.templates=[];$scope.include = function(templateURI) {var template={url:templateURI};$scope.templates.push(template);console.log($scope.templates);}$scope.delete= 函数(网址){removeEntity($scope.templates,url);}var removeEntity = 函数(元素，url){元素.forEach(函数(元素，索引){if(element.url===url){元素.拼接(索引，1)；}})}上面的include"函数不适用于 $routeProvider.在 ng-view 之外使用时它工作正常，没有 $routeProvider.将包含"函数从 mainCtrl 移动到服务会成功吗?有什么提示吗?
谢谢
在 main.html
在 app.js 中
$routeProvider.什么时候('/'， {templateUrl: 'views/main.html',控制器:'mainCtrl'})
不同的控制器....
I have a function to include html files on click. The problem is that it doesn't work when under ng-view (using $routeProvider), while it works fine outside of ng-view. I suspect that moving the include function from controller to service might help, but I am unsure how to do that as I'm new to Angular.
HTML when it works:
<body ng-app="MyApp">
<ng-include src="'views/main.html'" ng-controller="mainCtrl"></ng-include>
</body>
HTML when it doesn't work:
<body ng-app="MyApp">
<div ng-view></div>
</body>
main.html:
<div ng-controller="mainCtrl">
<button ng-click="include('temp1.html')">Block 1</button><i ng-click="delete('temp1.html')">DEL 1</i>
<button ng-click="include('temp2.html')">Block 2</button><i ng-click="delete('temp2.html')">DEL 2</i>
<button ng-click="include('temp3.html')">Block 3</button><i ng-click="delete('temp3.html')">DEL 3</i>
<div ng-repeat="template in templates">
<div ng-include="template.url">Content from blocks goes here</div>
</div>
</div>
APP.js:
angular
.module('MyApp', [
'ngResource',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
mainCtrl:
angular.module('MyApp').controller('mainCtrl', function ($scope) {
$scope.templates=[];
$scope.include = function(templateURI) {
var template={url:templateURI};
$scope.templates.push(template);
console.log($scope.templates);
}
$scope.delete= function(url){
removeEntity($scope.templates,url);
}
var removeEntity = function(elements,url){
elements.forEach(function(element,index){
if(element.url===url){
elements.splice(index,1);
}
})
}
The above "include" function does not work with $routeProvider. It works fine when used outside the ng-view, without $routeProvider. Would moving the 'include' function from mainCtrl to the serrvice would do the trick?
Any tips?
Thanks
解决方案 In main.html
<div ng-controller="MyController">
and in app.js
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
different controllers....
这篇关于AngularJS - ng-include 不适用于 ng-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
