meaning - angularjs tutorial pdf




AngularJS। नियंत्रक घटक के बाहर से कंट्रोलर फ़ंक्शन को कैसे कॉल करें (6)

मैं वेब पेज के किसी भी स्थान (नियंत्रक घटक के बाहर) से नियंत्रक के तहत परिभाषित फ़ंक्शन कैसे कॉल कर सकता हूं?

जब मैं "प्राप्त करें" बटन दबाता हूं तो यह पूरी तरह से काम करता है। लेकिन मुझे इसे div नियंत्रक के बाहर से कॉल करने की आवश्यकता है। तर्क है: डिफ़ॉल्ट रूप से मेरा div छुपा हुआ है। नेविगेशन मेनू में कहीं भी मैं एक बटन दबाता हूं और इसे मेरे div को दिखाया जाना चाहिए और "get" फ़ंक्शन निष्पादित करना चाहिए। मैं इसे कैसे प्राप्त कर सकता हूं?

मेरा वेब पेज है:

<div ng-controller="MyController">
  <input type="text" ng-model="data.firstname" required>
  <input type='text' ng-model="data.lastname" required>

  <form ng-submit="update()"><input type="submit" value="update"></form>
  <form ng-submit="get()"><input type="submit" value="get"></form>
</div>

मेरी जेएस:

   function MyController($scope) {
      // default data and structure
      $scope.data = {
        "firstname" : "Nicolas",
        "lastname" : "Cage"
      };

      $scope.get = function() {
        $.ajax({
           url: "/php/get_data.php?",
           type: "POST",
           timeout: 10000, // 10 seconds for getting result, otherwise error.
           error:function() { alert("Temporary error. Please try again...");},
           complete: function(){ $.unblockUI();},
           beforeSend: function(){ $.blockUI()},
           success: function(data){
            json_answer = eval('(' + data + ')');
            if (json_answer){
                $scope.$apply(function () {
                  $scope.data = json_answer;
            });
            }
        }
    });
  };

  $scope.update = function() {
    $.ajax({
        url: "/php/update_data.php?",
        type: "POST",
        data: $scope.data,
        timeout: 10000, // 10 seconds for getting result, otherwise error.
        error:function() { alert("Temporary error. Please try again...");},
        complete: function(){ $.unblockUI();},
        beforeSend: function(){ $.blockUI()},
        success: function(data){ }
      });
    };
   }

कंट्रोलर के फ़ंक्शन को इसके बाहर से कॉल करने का एक तरीका यहां दिया गया है:

angular.element(document.getElementById('yourControllerElementID')).scope().get();

जहां get() आपके नियंत्रक से एक फ़ंक्शन है।

आप स्विच कर सकते हैं

document.getElementById('yourControllerElementID')` 

सेवा मेरे

$('#yourControllerElementID')

यदि आप jQuery का उपयोग कर रहे हैं।

साथ ही, यदि आपके फ़ंक्शन का अर्थ आपके व्यू पर कुछ भी बदलना है, तो आपको कॉल करना चाहिए

angular.element(document.getElementById('yourControllerElementID')).scope().$apply();

परिवर्तन लागू करने के लिए।

एक और बात, आपको ध्यान रखना चाहिए कि पृष्ठ लोड होने के बाद स्कोप प्रारंभ किए गए हैं, इसलिए पेज लोड होने के बाद दायरे के बाहर से कॉलिंग विधियों को हमेशा किया जाना चाहिए। अन्यथा आप इस दायरे में नहीं पहुंच पाएंगे।

अद्यतन करें:

कोणीय के नवीनतम संस्करणों के साथ, आपको उपयोग करना चाहिए

angular.element(document.getElementById('yourControllerElementID')).injector().‌​get('$rootScope')

और हाँ, वास्तव में, यह एक बुरा अभ्यास है , लेकिन कभी-कभी आपको केवल त्वरित और गंदे काम करने की ज़रूरत होती है।


दिमित्री का जवाब ठीक काम करता है। मैंने अभी एक ही तकनीक का उपयोग करके एक साधारण उदाहरण बनाया है।

jsfiddle: http://jsfiddle.net/o895a8n8/5/

<button onclick="call()">Call Controller's method from outside</button>
<div  id="container" ng-app="" ng-controller="testController">
</div>

function call() {
    var scope = angular.element(document.getElementById('container')).scope();
      scope.$apply(function(){
        scope.msg = scope.msg + ' I am the newly addded message from the outside of the controller.';
    })
    alert(scope.returnHello());
}

function testController($scope) {
    $scope.msg = "Hello from a controller method.";
    $scope.returnHello = function() {
        return $scope.msg ; 
    }
}

मेरे पास कई मार्ग और एकाधिक नियंत्रक हैं, इसलिए मुझे काम के स्वीकार्य उत्तर नहीं मिल सका। मैंने पाया कि विंडो कार्यों में फ़ंक्शन जोड़ना:

fooModule.controller("fooViewModel", function ($scope, fooService, $http, $q, $routeParams, $window, $location, viewModelHelper, $interval) {
    $scope.initFoo = function () {
        // do angular stuff
    }
    var initialize = function () {
        $scope.initFoo();
    }

    initialize();

    window.fooreinit = initialize;

}

फिर नियंत्रक के बाहर, यह किया जा सकता है:

function ElsewhereOnThePage() {
    if (typeof(fooreinit) == 'function') { fooreinit(); }
}

मैं $ http के साथ काम करने के लिए उपयोग करता हूं, जब कोई संसाधन से कुछ जानकारी प्राप्त करना चाहता हूं तो मैं निम्न कार्य करता हूं:

angular.module('services.value', [])

.service('Value', function($http, $q) {

var URL = "http://localhost:8080/myWeb/rest/";

var valid = false;

return {
    isValid: valid,
    getIsValid: function(callback){
        return $http.get(URL + email+'/'+password, {cache: false})
                    .success(function(data){
            if(data === 'true'){ valid = true; }
        }).then(callback);
    }}
    });

और नियंत्रक में कोड:

angular.module('controllers.value', ['services.value'])

.controller('ValueController', function($scope, Value) {
    $scope.obtainValue = function(){
        Value.getIsValid(function(){$scope.printValue();});
    }

    $scope.printValue = function(){
        console.log("Do it, and value is " Value.isValid);
    }
}

मैं सेवा को भेजता हूं कि नियंत्रक में किस फ़ंक्शन को कॉल करना है


मैं कारखाने को अपनी कोड की अपनी लाइन के साथ इंजेक्ट करने के बजाय नियंत्रकों पर निर्भरताओं के रूप में शामिल करना चाहूंगा: http://jsfiddle.net/XqDxG/550/

myModule.factory('mySharedService', function($rootScope) {
    return sharedService = {thing:"value"};
});

function ControllerZero($scope, mySharedService) {
    $scope.thing = mySharedService.thing;

नियंत्रक ज़ीरो। $ इंजेक्ट = ['$ स्कोप', 'mySharedService'];


यह विचार करने योग्य हो सकता है कि आपके मेनू को किसी भी संबंधित क्षेत्र के बिना जाने का सही तरीका है या नहीं। यह वास्तव में कोणीय तरीका नहीं है।

लेकिन, अगर आपको जिस तरह से जाना है, तो आप इसे रूट रूटस्कोप में जोड़कर और फिर उन कार्यों के भीतर कर सकते हैं जो घटनाओं को भेजने के लिए $ प्रसारण का उपयोग कर कर सकते हैं। तब आपका नियंत्रक उन घटनाओं को सुनने के लिए $ का उपयोग करता है।

एक और बात यह सोचने के लिए कि क्या आप बिना किसी गुंजाइश के अपने मेनू को समाप्त कर रहे हैं, यह है कि यदि आपके पास एकाधिक मार्ग हैं, तो आपके सभी नियंत्रकों को अपना स्वयं का अपताना होगा और कार्य प्राप्त करना होगा। (यह माना जाता है कि आपके पास एकाधिक नियंत्रक हैं)







angularjs