php - कोणीय नियंत्रक से पाठ बॉक्स के साथ एकाधिक छवि डेटा भेजें




angularjs angularjs-scope (2)

मैं पाठ बॉक्स मान के साथ सर्वर साइड (PHP) को एकाधिक छवि डेटा भेजना चाहता हूं। मैंने कई छवि अपलोड किए हैं, लेकिन मैं फॉर्म सबमिट करते समय अपने डेटा को सर्वर साइड में भेजने में सक्षम नहीं हूं। मेरा दृश्य कोड नीचे है

<form ng-submit="save()"><input type="file" file-upload multiple>
<div ng-repeat="step in files">
    <img ng-src="{{step}}" />{{step.name}}
    <input type="text" ng-model="comments">
</div>
<input type="submit"></form>

मेरे नियंत्रक में

app.directive('fileUpload', function() {
  return {
    scope: true, //create a new scope
    link: function(scope, el, attrs) {
      el.bind('change', function(event) {
        var files = event.target.files;
        //iterate files since 'multiple' may be specified on the element
        for (var i = 0; i < files.length; i++) {
          //emit event upward
          scope.$emit("fileSelected", {
            file: files[i]
          });
        }
      });
    }
  };
});

app.controller('mainCtrl', function($scope) {
  $scope.files = [];
  $scope.$on("fileSelected", function(event, args) {
    var item = args;
    $scope.files.push(item);
    var reader = new FileReader();

    reader.addEventListener("load", function() {
      $scope.$apply(function() {
        item.src = reader.result;
      });
    }, false);

    if (item.file) {
      reader.readAsDataURL(item.file);
    }
  });
});

जब मैं बटन सबमिट करें पर क्लिक करता हूं तो मैं छवि के लिए इमेज नाम भेजना चाहता हूं। छवि के लिए मैं कैसे एपीआई कैल के माध्यम से डेटा भेज सकता हूं। php.in मेरा सेव () फ़ंक्शन कोड नीचे दिखता है

$scope.save = function()
{
console.log($scope.files)console.log($scope.comments)
}

Answers

आपको सर्वर पर चित्र भेजने के लिए $http सेवा का उपयोग करना होगा

$scope.save = function() {
    var fd = new FormData();
    fd.append('file', $scope.files);
    $http.post('uploadUrl', fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
        .then(function(response) {})
        .catch(function(response) {});
}

यदि आपका एचटीएमएल नीचे जैसा है तो आप ऐसा कुछ कर सकते हैं:

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
    </div>
</div>

फिर आप निम्नानुसार अभिभावक दायरे तक पहुंच सकते हैं

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

यदि आप अपने विचार से अभिभावक नियंत्रक तक पहुंचना चाहते हैं तो आपको ऐसा कुछ करना होगा:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

जेएसफ़िल्ड देखें: http://jsfiddle.net/2r728/

अद्यतन करें

असल में जब आपने माता-पिता नियंत्रक में cities को परिभाषित किया है तो आपके बच्चे नियंत्रक सभी स्कोप चर का वारिस करेंगे। तो सैद्धांतिक रूप से आपको $parent को कॉल करने की आवश्यकता नहीं है। उपर्युक्त उदाहरण भी निम्नानुसार लिखा जा सकता है:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

AngularJS दस्तावेज़ इस दृष्टिकोण का उपयोग करते हैं, here आप $scope बारे में अधिक पढ़ सकते हैं।

एक और अद्यतन

मुझे लगता है कि यह मूल पोस्टर का बेहतर जवाब है।

एचटीएमएल

<div ng-app ng-controller="ParentCtrl as pc">
    <div ng-controller="ChildCtrl as cc">
        <pre>{{cc.parentCities | json}}</pre>
        <pre>{{pc.cities | json}}</pre>
    </div>
</div>

जे एस

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Inherit parent control

    vm.parentCities = vm.cities;
}

यदि आप controller as विधि के controller as उपयोग करते हैं तो आप निम्नानुसार मूल दायरे तक पहुंच सकते हैं

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}

जैसा कि आप देख सकते हैं कि $scopes तक पहुंचने में कई अलग-अलग तरीके हैं।

अद्यतन पहेली

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}
    
function ChildCtrl($scope) {
    var vm = this;
    ParentCtrl.apply(vm, arguments);
    
    vm.parentCitiesByScope = $scope.pc.cities;
    vm.parentCities = vm.cities;
}
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app ng-controller="ParentCtrl as pc">
  <div ng-controller="ChildCtrl as cc">
    <pre>{{cc.parentCities | json}}</pre>
    <pre>{{cc.parentCitiesByScope | json }}</pre>
    <pre>{{pc.cities | json}}</pre>
  </div>
</div>





php angularjs angularjs-scope