2014-06-28 53 views
3

如何指定控制器應該是JavaScript中的另一個控制器而不是HTML中的子控件?在AngularJS中包裝控制器

例如,在pageCtrl,我爲我使用的呼籲的方法modalBlog,在一個模式中打開一個博客帖子(角UI)。我想指定控制器爲BlogCtrl,同實際的博客頁面。我想通過它的輸入,雖然(即博客文章ID)。有沒有辦法做這樣的事情:

$scope.modalBlog = function(postId) { 
    var modalInstance = $modal.open({ 
    templateUrl: '...', 
    controller: function(..) { 
     // Set some variables 
     // ... 

     // set BlogController as a child controller to this 
    } 
}; 

眼下,通過設置controller: 'BlogCtrl',它的母公司是路線範圍(從UI。路由器的$state),或在視覺上:

所以,層次是:

+-Root 
|---- PageCtrl 
|---- BlogCtrl 

但是當我指定一個匿名函數,我得到:

+-Root 
|--+- PageCtrl 
    +--+- <Anonymous function> 

有沒有一種方法(只用JavaScript)來實現這個層次?

+-Root 
|--+- PageCtrl 
    +--+- <Anonymous function> 
     +--+- BlogCtrl 

動機是重新使用BlogCtrl中的代碼來下載帖子。

我想完全替代方法來實現日結束相同的功能/目標將是:

  • 創建BlogService這兩者該匿名函數和BlogCtrl可以使用,
  • 如果有符合規範的方式,甚至加載具有指定BlogCtrl作爲控制器

雖然我認爲這將是在這種特殊情況下更好的方法,我很好奇,一個標籤視圖通過JavaScript IFY在AngularJS範圍的層次結構(而不​​是在這是相當直截了當的HTML設置它。)

更新:

我覺得我給了第二個選項是最好的(我有隻有在寫這個問題的時候纔想到它)來實現我所需要的功能。

所以,我的作用是:

$scope.modalBlog = function(postId) { 
    var modalInstance = $modal.open({ 
    templateUrl: '...', 
    controller: function(..) { 
     // Set some variables and functions 
    } 

};

,而不是在views/blog.html指着我指向views/blog-modal.html,其頂部的標籤是:

<section ng-controller="BlogCtrl"> 

這使我的設計結構,其中上述控制器功能是BlogCtrl父。

這導致視圖有些重複,因爲我不知道如何有條件地設置控制器(例如ng-controller="modal?BlogCtrl:not BlogCtrl"),但它不是太糟糕。雖然我仍然很好奇如何在純粹的Javascript中設置結構。

+0

對不起,但我不明白你想問什麼問題或你有什麼問題。 – JeffryHouser

+0

即使我不明白。我希望你已經知道,如果你正在使用'角度模態',那麼相同的控制器不能用於進一步的數據操作。你必須使用新的控制器。 仍然可以幫助你,如果你澄清更多的東西... – micronyks

+0

檢查這種方法結合你的項目模態:http://stackoverflow.com/questions/16265844/invoking-modal-window-in-angularjs-bootstrap-ui-使用-javascript/23958996#23958996 –

回答

-1

如何讓你的父母的孩子的控制器類似如下:

http://plnkr.co/edit/JixIxrlsH8bDh9QOmoZd?p=info

+0

據我所知,你完全用HTML設置你的結構(就像我的「選項2」所描述的那樣),但是整個問題是關於如何在純JS中完成而不是在視圖中... – Matt

0

據我瞭解,你要實現的目標是能夠調用與模態父控制器定義的匿名函數(孩子)狀態。

定義匿名函數而不訪問範圍。然後,不要將控制器傳遞給模態,而要傳遞匿名函數。

在父控制器:

$scope.getpost= function (postId) { 
    ... 
}; 

模態:

$scope.modalBlog = function (postId) { 
    var modalWindow = $modal.open({ 
     templateUrl: 'views/blog.html', 
     controller: 'editBlogController', 
     resolve: { 
      textid: function() { return postId; }, 
      gettextfn: function() { return $scope.getpost; } 
     } 
    }); 
}; 

您應該能夠根據需要通過模態控制器通過儘可能多的可重複使用的功能。

如果你想重複使用一個視圖,我不清楚這種重用的條件是什麼。

+0

我從來沒有想過使用'resolve'來傳遞數據。 (我對Angular仍然很陌生。)這真是個好主意。謝謝! – Matt