我有这条路线。
// index.html
<div ng-controller="mainCtrl">
<a href='#/one'>One</a>
<a href='#/two'>Two</a>
</div>
<div ng-view></div>
这是我如何加载部分到我的ng视图。
// app.js
var App = angular.module('app',[]);
App.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/one',{template: 'partials/one.html',controller: App.oneCtrl});
$routeProvider.when('/two',{template: 'partials/two.html',controller: App.twoCtrl});
}]);
当我点击链接时，它会在ng视图中显示相应的标记。但是当我尝试使用ng-include来包含partials / two.html in partials / one.html时，它会正确显示它，但是创建了一个不同的范围，所以我无法与之进行交互。
// partials/two.html - markup <div ng-controller="twoCtrl">I'm a heading of Two</div> // partials/one.html - markup <div ng-controller="oneCtrl">I'm a heading of One</div> <div ng-include src="'partials/two.html'"></div>
您可以编写自己的include指令，不会创建新的范围。例如：
MyDirectives.directive('staticInclude',function($http,$templateCache,$compile) {
return function(scope,element,attrs) {
var templatePath = attrs.staticInclude;
$http.get(templatePath,{ cache: $templateCache }).success(function(response) {
var contents = element.html(response).contents();
$compile(contents)(scope);
});
};
});
你可以这样使用：
<div static-include="my/file.html"></div>
