1

2 つのコントローラーを定義するインデックス ページがあります。1 つのメイン コントローラーを常に呼び出したい (常にレンダリングする必要があります)。もう 1 つのコントローラーは、特定のサブ URL 呼び出しに対してのみ呼び出されます。1 つを別のネスト内に作成する必要がありますか、それとも相互に独立したままにすることができますか? ルートなどを変更するアクセス権はなく、コントローラーのみです。言及されたテンプレート (HTML) を使用すると、URL が /index であるにもかかわらず、両方のコントローラーを呼び出し/レンダリングします。

Only for /index/subPage, I want both controllers to be rendering. 

/index
/index/subPage

HTML:

<div ng-controller="MainCtl" ng-init=initMain()>        
    <p> Within ctller2 {{results}} </p>
</div>


<div ng-controller="Ctller2">       <!-- should not be displayed unless /subPage/mainUrl is rendering -->
    <p> Within ctller2 {{results}} </p>
</div>

JS:

app.controller('MainCtl', ['$scope', '$http', '$location', function ($scope, $http, $location) {

    $http.get('xx/mainUrl').then(function(data) {
        $scope.results = someDataJSON;
        console.log(someDataJSON);
    });

    $scope.initMain = function() {      
            $scope.initMethods();   
    }   
}]); 


app.controller('Ctller2', ['$scope', '$http', '$location', function ($scope, $http, $location) {
 // This controller gets initialized/rendered/called even when xx/mainUrl is called, and when xx/subPage/mainUrl is called too.. 
    $http.get('xx/subPage/mainUrl').then(function(data) {
        $scope.results = someDataJSON;
        console.log(someDataJSON);
    })

    $http.get('xx/subPage').then(function(data) {
        $scope.results = data.data;
        console.log(data);
    })

   angular.element(document).ready(function () {
     alert('Hello from SubCtl, moving over from main controller to here');
    });


}]);

私は何を間違っていますか？Angular.js は初めてです

4

1 に答える 1

2

を使用して、条件付きでコントローラを開始できますng-if。したがって、次のようなことを試すことができます。

<body ng-controller="MainCtrl">

    <div ng-controller="ctrl1">{{hello}}</div>
    <div ng-controller="ctrl2" ng-if="showCtrl2">{{hello}}</div>

</body>

次に、を使用して現在のURLを確認して、親コントローラーの変数の値を設定します$location.path()

var app = angular.module('plunker', []);

app.config(function($locationProvider){
    $locationProvider.html5Mode(true); 
});

app.controller('MainCtrl', function($scope, $location) {
  $scope.showCtrl2 = ($location.path() === 'my path');
});

app.controller('ctrl1', function($scope){
  $scope.hello = 'ctrl1 says hello';
});

app.controller('ctrl2', function($scope){
  $scope.hello = 'ctrl2 says hello';
});

しかし、それは少しハックであり、より大きなプロジェクトの場合、より堅牢なソリューションにはui.router.

于 2015-07-24T01:58:22.383 に答える