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 内に適切なマークアップが表示されます。しかし、 usingpartials/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

新しいスコープを作成しない独自の 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>
于 2013-06-27T09:57:17.370 に答える
5

ngIncludeのドキュメントには、 「このディレクティブは新しいスコープを作成します」と記載されています。これは設計によるものです。

探しているインタラクションのタイプに応じて、カスタム サービスを介して 2 つのコントローラー間でデータ/機能を共有する 1 つの方法について、この投稿を参照することをお勧めします。

于 2012-09-12T18:14:16.913 に答える
4

実際には、共有サービスを使用せずにこれを行うことができます。$scope.$emit(...) は、イベントをリッスンして子スコープに再ブロードキャストできる $rootScope にイベントをディスパッチできます。

デモ: http://jsfiddle.net/VxafF/

参照: http://www.youtube.com/watch?v=1OALSkJGsRw (最初のコメントを参照)

于 2012-09-21T18:42:20.870 に答える