Chia sẻ một biến giữa các bộ điều khiển trong angular.js

Tôi mới đến góc cạnh và tôi tự hỏi làm thế nào tôi có thể chia sẻ một biến giữa các bộ điều khiển trong góc. Tôi đang sử dụng các kịch bản sau đây -Chia sẻ một biến giữa các bộ điều khiển trong angular.js

Trong Main.js:

function MainCntl($scope) { 
    ---code 
} 

function SearchCtrl($scope, $http) { 
    $scope.url = 'http://10.0.0.13:9000/processAdHoc'; 
    $scope.errorM = "No results";  
    $scope.search = function() { 

     $http.post($scope.url, { "data" : $scope.keywords}). 
     success(function(data, status) { 
      $scope.status = status; 
      $scope.data = data; 
      $scope.result = data; 
      alert('yes'); 
     }) 
     . 
     error(function(data, status) { 
      $scope.data = data || "Request failed"; 
      $scope.status = status; 
      alert('no'); 
      $scope.result = "failed"; 
     }); 
    }; 
}

Trong index.html

<body ng-controller="MainCntl" > 
---code 
<div ng-controller="SearchCtrl"> 
    <form class="well form-search"> 
    <div class="ui-widget"> 
      <label for="tags"></label> 
      <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a> 
      <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" /> 
    </div> 
    </form> 
</div> 
---code 
<p ng-model="result"> 
    {{result}} 
</p> 
</body>

Tất cả mọi thứ hoạt động tốt với các ajax Tôi đang gửi dữ liệu và nhận được một câu trả lời , câu hỏi của tôi là như sau:

Trong hàm SearchCtrl, tôi có một biến gọi là $ scope.result mà sau này được gọi trong Index.html. Nếu tôi chèn mã html có chứa biến đó vào bộ điều khiển SearchCtrl thì nó hoạt động tốt nhưng nếu nó nằm trong bộ điều khiển MainCtrl thì nó không hoạt động. Làm thế nào tôi có thể chia sẻ biến này giữa các bộ điều khiển.

Cảm ơn trước

Nguồn

2013-05-12 Gidon

Sử dụng dịch vụ và đưa nó vào cả bộ điều khiển và tham khảo các biến phạm vi của bạn đến biến dịch vụ.

Ví dụ:

angular.module("yourAppName", []).factory("myService", function(){ 

    return {sharedObject: {data: null } } 

}); 

function MainCtrl($scope, myService) { 
    $scope.myVar = myService.sharedObject; 
} 

function SearchCtrl($scope, $http, myService) { 
    $scope.myVar = myService.sharedObject; 
}

Trong mẫu của bạn làm:

{{myVar.data}}

See an example Sử dụng v1.1.5 góc

Lý do bạn đặt nó trong một đối tượng bên trong là để bảo vệ bạn tài liệu tham khảo, nếu bạn giữ nó mà không có một "sharedObject", và thay đổi đối tượng đó, ràng buộc của bạn sẽ trỏ đến tham chiếu cũ nd sẽ không hiển thị bất cứ điều gì trong mẫu.

Nguồn

2013-05-12 15:02:13

Hi ShaiRez, cảm ơn câu trả lời nhanh và ví dụ, nhưng thật đáng buồn nó vẫn không hoạt động ... có lẽ tôi không thực hiện nó một cách chính xác. Tôi đã thêm tất cả mọi thứ bạn đã cung cấp trong ví dụ và cũng đã thay đổi mẫu thành {{myVar.data}}. Hai câu hỏi phát sinh, tôi không nên thay đổi chế độ xem mẫu cũng như thêm myVar vào các hàm thành công/lỗi của cuộc gọi ajax? Cảm ơn một lần nữa, Gidon – Gidon

Sau khi đọc thêm một chút, tôi đã tìm thấy một cách dễ dàng hơn để làm điều này với $ rootScope ... Cảm ơn anyway cho thời gian và kudo của bạn trên meetups góc, tôi sẽ cố gắng để làm cho kế tiếp :) – Gidon

@ShaiRez là mô hình ưu tiên để xử lý xác thực? xác thực trong một dịch vụ (nếu chưa đăng nhập) và trả về một mô hình người dùng cho tất cả các bộ điều khiển cần nó? – turbo2oh

Chia sẻ một biến giữa các bộ điều khiển trong angular.js

Trả lời

Các vấn đề liên quan