2015-07-24 3 views
1

У меня есть индексная страница, в которой я определяю два контроллера. Я хочу, чтобы один главный контроллер всегда (всегда должен быть визуализирован), а другой вызывается только для определенных вызовов URL-адресов. Должен ли я сделать одно вложенное в другое, или я могу держать их независимыми друг от друга? У меня нет доступа к маршрутам изменения или что-то еще, только к контроллеру. Прямо сейчас, когда я использую шаблон (HTML) упоминалось, он вызывает/делает оба контроллера, даже если URL это сказать/индексAngularjs - Вызов только одного из множества субконтроллеров/нескольких контроллеров

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

ответ

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'; 
}); 

Но это немного Hacky и для большего проект более надежное решение потребует использования чего-то вроде ui.router.

+0

спасибо, что работает пока. Вернусь к ui.router, как только я закончу, и могу позволить себе пересмотреть :) –

Смежные вопросы