如何在角度範圍之間管理數據？

我有這樣的標記：如何在角度範圍之間管理數據？

<ul> 
    <li data-ng-controller="TileController"> 
     <h1>Title</h1> 
     <span> 
      <a href="#" data-ng-click="loadBeanForEdit()"> 
     </span> 
     .... 
     <div id="beanEditModal" data-ng-controller="TileBeanController"> 
      <!-- Bootstrap modal --> 
     </div> 
    </li> 
    <li> 
     ... 
    </li> 
    ... 
</ul>

工作流程是：用戶點擊a，我想加載使用AJAX的一些數據，在彈出的編輯它：

function TileController($scope) { 
    $scope.loadBeanForEdit= function(e) { 
     e.stopPropagation(); 
     $("#beanEditModal").modal(); 
    }; 
}

的問題是，我不希望將數據保留在父範圍內（TileController）我想將其加載到TileBeanController範圍內。但我怎麼能從父控制器做到這一點？或者，也許有更好的方法？

來源

2013-03-11 madhead

什麼樣的數據是你的想法？你能提供一個小例子嗎？ – 2013-03-11 10:22:58

來自Java bean的非常簡單的JSON：'{title：「Title」，duration：15000，extraIds：[1,2,3]}'。我將使用有角度的數據綁定來顯示和編輯它。完美的例子是：用戶點擊鏈接，我正在做一個ajax調用，當它準備好時，我會顯示模式與封裝在其範圍內的數據。 – madhead 2013-03-11 10:25:30

一般來說，您需要創建一個服務，以便您的兩個控制器可以進行通信。我會做的是某種程度上像這樣

function TileController($scope, News) { 
    $scope.loadBeanForEdit= function(e) { 
     e.stopPropagation(); 
     News.setModal(some-id-or-whatever); 
     $("#beanEditModal").modal(); 
    }; 
}

所以這個函數調用它通知大家誰是聽的模式已經開通了服務loadBeanForEdit功能。您的服務可能是這個樣子：

angular.factory('News', function($rootScope) { 
    var news = {}; 

    // Sets and broadcasts that a modal has been opened 
    news.setModal = function(id) { 
     this.modal = id; 
     $rootScope.$broadcast('modal'); 
    }; 
});

所有你現在需要做的就是聽的時候東西是你的TileBeanController內廣播，像這樣：

function TileBeanController($scope, News) { 
    $scope.$on('modal', function() { 
     // Load data 
    }); 
}

我希望幫助:)

來源

2013-03-11 10:36:04

如果你需要爲你的元素的範圍，我想將它包裝上的孤立範圍指令：

myApp.directive('tilebean', function() { 
    return { 
     restrict : 'E', 
     scope: { 
      data: '=' 
     }, 
     template: '<div id="beanEditModal"><!-- Bootstrap modal -->This is your title: {{data.title}}</div>' 
    }; 
});

在控制器

<ul> 
    <li data-ng-controller="TileController"> 
     <h1>Title</h1> 
     <span> 
      <a href="#" data-ng-click="loadBeanForEdit()"> 
     </span> 
     .... 
     <tilebean ng-model="data"></tilebean> 
    </li> 
    <li> 
     ... 
    </li> 
    ... 
</ul>

和填充數據：3210

然後，您可以將此數據參數，在視圖中綁定

function TileController($scope) { 
    $scope.loadBeanForEdit= function(e) { 
     e.stopPropagation(); 
     $("#beanEditModal").modal(); 
     $scope.data = getDataFromAjax();//replace this for your ajax call 
    }; 
}

來源

2013-03-11 10:38:12

謝謝您的回答，但似乎按照@ Flek的答案使用服務更靈活。 – madhead 2013-03-11 11:48:06

如何在角度範圍之間管理數據？

回答

相關問題