21

我有这条路线。

// 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 中显示适当的标记。但是，当我尝试将using包含partials/two.html在内时，它会正确显示它，但会创建不同的范围，因此我无法与之交互。partials/one.htmlng-include

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

​ 我该如何解决这个问题？或者有没有其他方法可以达到同样的效果？

4

4 回答 4

70

您可以编写自己的包含指令，该指令不会创建新范围。例如：

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>
于 2013-06-27T09:57:17.370 回答
5

ngInclude的文档指出“此指令创建新范围”。所以这是设计使然。

根据您正在寻找的交互类型，您可能希望查看这篇文章，了解一种通过自定义服务在两个控制器之间共享数据/功能的方法。

于 2012-09-12T18:14:16.913 回答
5

所以这不是这个问题的答案，但我在这里寻找类似的东西，希望这对其他人有帮助。

该指令将包含一个部分而不创建新范围。例如，您可以在部分中创建一个表单并从父控制器控制该表单。

这是我为它创建的 Repo 的链接。

祝你好运 ：-）

——詹姆斯·哈灵顿

于 2014-10-06T21:29:40.783 回答
4

您实际上可以在不使用共享服务的情况下执行此操作。$scope.$emit(...) 可以将事件发送到 $rootScope，它可以监听它们并重新广播到子作用域。

演示：http: //jsfiddle.net/VxafF/

参考： http ://www.youtube.com/watch?v=1OALSkJGsRw （见第一条评论）

于 2012-09-21T18:42:20.870 回答