JS góc - Gửi dữ liệu từ chỉ thị đến bộ điều khiển chính

Question

Tôi có một ứng dụng mà tôi sử dụng chỉ thị ngCart để lưu trữ các mục được thêm vào giỏ. Vấn đề là chỉ thị này chỉ có chức năng gửi thông tin về các mục được người dùng thêm vào, nhưng tôi cũng cần gửi một số thông tin mà tôi sẽ nhận được từ một biểu mẫu. Vì vậy, để gửi nó trong một đối tượng duy nhất, trước tiên tôi cần trích xuất dữ liệu được lưu trữ trong chỉ thị đến phạm vi chính của tôi và sau đó hợp nhất dữ liệu đó với dữ liệu tôi nhận được từ biểu mẫu.

Để làm điều đó, tôi cần phải sửa đổi chỉ thị ngCart.js. Tôi đã cố gắng để thực hiện một dịch vụ, như được khuyến khích here, nhưng tôi không làm cho nó hoạt động. Code tôi thêm vào chỉ là này

.service('ngCartData', ['ngCart', function(ngCart){ 

    return { 
     data:ngCart; 
    }; 

}]) 

, nhưng tôi nhận được một lỗi nói Module 'ngCart' is not available!

Tôi hoàn toàn mới với các dịch vụ và nhà máy ở góc, vì vậy tôi không biết chính xác nơi để xem xét Để làm cho nó hoạt động. Tôi đã thực hiện một mã số plunkr (tôi đã thử sửa đổi tệp ngCart.js bằng mã ở trên, nhưng plunkr hiển thị chỉ thị mà không có bất kỳ sửa đổi nào). Tôi chỉ cần để có thể gửi dữ liệu được lưu trữ trong các chỉ thị trong phạm vi ngCart để tôi có thể nghe nó trong bộ điều khiển cha mẹ (xem phần thanh toán trong plunkr).

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn!

Answer 1

Bạn đã có ý tưởng đúng, và tôi ngạc nhiên là nó không hiệu quả với bạn.

Tôi đã chỉnh sửa ứng dụng của bạn theo cách sau (trong script.js)

app.controller('myCtrl', function($scope, ngCart, myCart) { 
    $scope.names = [...]; 
    ... 
    console.log(myCart.cart); 
}) 
    .factory('myCart',function(ngCart){ 
     return { 
      cart: ngCart.$cart 
     }; 
}) 

và nó đăng nhập {shipping: 30, taxRate: null, tax: null, items: Array[2]}, mà tôi nghĩ là những gì bạn cần (tôi đã thêm 2 mặt hàng trước khi nó đăng nhập).

Lưu ý rằng việc thêm dịch vụ là không cần thiết; Dữ liệu có thể truy cập mọi lúc mọi nơi bạn cần. Chỉ cần tiêm ngCart vào bộ điều khiển/dịch vụ của bạn/etc. và dữ liệu cập nhật sẽ có sẵn cho bạn.

Do đó, đoạn mã sau là tương đương:

app.controller('myCtrl', function($scope, ngCart) { 
     $scope.names = [...]; 
     ... 
     console.log(ngCart.$cart); 
    }); 

Một lý do có thể cho người nhận được lỗi bạn đã có thể là, trong khi chỉnh sửa module ngCart, bạn đã có một số loại lỗi (như một lỗi đánh máy) , dẫn đến ngCart không hiển thị với góc cạnh.

Answer 2

bạn đã tải file js như thế này:

<script src="pathto/angular/angular.js"></script> 
<script src="pathto/ngCart.js"></script> or ngCart.min.js 

cậu nạp module trong module khai của bạn như thế này? :

var myApp = angular.module('myApp',['ngCart']); 

Answer 3

Bạn thực sự có điều này lạc hậu. Bạn không thể tiêm một chỉ thị vào một dịch vụ. Bạn phải tiêm dịch vụ vào bộ điều khiển chính và đưa vào chỉ thị để có thể sử dụng nó làm cầu nối giữa hai thiết bị. Dịch vụ là đơn vì vậy nếu bạn sửa đổi các thuộc tính của một dịch vụ, những sửa đổi đó sẽ có sẵn ở bất kỳ nơi nào khác mà nó được yêu cầu. dịch vụ của bạn sẽ trông như thế này:

.service('ngCartData', [function(){ 

return { 
    data:[], 
    addData: function(newData){ 
     this.data.push(newData); 
    }, 
    getData: function(){ 
     return this.data; 
    } 
}; 

}]) 

sau đó trong điều khiển của bạn và chỉ sử dụng api ngCartData, trong đó sẽ giống như thế này:

$scope.someData = ngCartData.getData(); 
$scope.someFunction = function(dataToStore){ 
    ngCartData.addData(dataToStore); 
};