angularjs – 如何将一个部分包含在其他中,而不创建新的范围？

发布时间：2020-12-17 08:16:35 所属栏目：安全来源：网络整理

导读：我有这条路线。 // index.htmldiv 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',

我有这条路线。

// 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!