Как включить один частичный в другой, не создавая новую область?

Question

У меня есть эти маршруты.

// 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/two.html внутри partials/one.html с помощью ng-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>

Как мне решить эту проблему? Или есть какой-то другой способ добиться того же результата?

Answer 1

Вы можете сделать это без использования общего сервиса. $scope.$emit(...) может отправлять события в $rootScope, который может прослушивать их и ретранслировать в дочерние области.

Демо: http://jsfiddle.net/VxafF/

Ссылка: http://www.youtube.com/watch?v=1OALSkJGsRw (см. Первый комментарий)

Answer 2

Вы можете написать свою собственную директиву 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>

Answer 3

Документация для ngInclude гласит: "Эта директива создает новую область видимости". так что это по замыслу.

В зависимости от типа взаимодействия, которое вы ищете, вы, возможно, захотите взглянуть на этот пост, чтобы найти способ обмена данными / функциями между двумя контроллерами через специальную службу.

Answer 4

Так что это не ответ на этот вопрос, но я сделал это здесь в поисках чего-то похожего, и, надеюсь, это поможет другим.

Эта директива будет включать частичное без создания новой области. Например, вы можете создать форму в партиале и управлять этой формой из родительского контроллера.

Вот ссылка на репо, который я создал для него.

удачи:-)

Джеймс Харрингтон