angularjs – 如何在不创建新范围的情况下将一个局部包含到另一个局部?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在不创建新范围的情况下将一个局部包含到另一个局部?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这条路线.
// index.html
<div ng-controller="mainCtrl">
    <a href='#/one'>One</a>
    <a href='#/two'>Two</a>
</div>​​​​​​​​​
<div ng-view></div>

这就是我将部分加载到ng-view中的方法.

// 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-view中显示相应的标记.但是当我尝试在partials / one.html中使用ng-include包含partials / two.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>
原文链接:https://www.f2er.com/angularjs/143961.html

猜你在找的Angularjs相关文章