angularjs - एंगुलरजेएस निर्देश में परिभाषित विधि को कैसे कॉल करें?




angularjs-directive (9)

आप एक डोम विशेषता निर्दिष्ट कर सकते हैं जिसका उपयोग माता-पिता को दायरे के दायरे पर फ़ंक्शन को परिभाषित करने की अनुमति देने के लिए किया जा सकता है। माता-पिता का दायरा तब इस विधि को किसी अन्य की तरह कॉल कर सकता है। Here's एक प्लंकर है। और नीचे प्रासंगिक कोड है।

clearfn निर्देश तत्व पर एक विशेषता है जिसमें अभिभावक का दायरा एक स्कोप संपत्ति को पारित कर सकता है, जिसके बाद निर्देश किसी वांछित व्यवहार को पूरा करने वाले फ़ंक्शन पर सेट कर सकता है।

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
      my-box{
        display:block;
        border:solid 1px #aaa;
        min-width:50px;
        min-height:50px;
        padding:.5em;
        margin:1em;
        outline:0px;
        box-shadow:inset 0px 0px .4em #aaa;
      }
    </style>
  </head>
  <body ng-controller="mycontroller">
    <h1>Call method on directive</h1>
    <button ng-click="clear()">Clear</button>
    <my-box clearfn="clear" contentEditable=true></my-box>
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>

मेरे पास निर्देश है, यहां कोड है:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

मैं उपयोगकर्ता कार्रवाई पर updateMap() को कॉल करना चाहता हूं। कार्रवाई बटन निर्देश पर नहीं है।

नियंत्रक से updateMap() को कॉल करने का सबसे अच्छा तरीका क्या है?


आप विधि नाम को निर्देशित करने के लिए निर्देश दे सकते हैं कि आप नियंत्रक से कॉल करना चाहते हैं लेकिन बिना किसी गुंजाइश के,

angular.module("app", [])
  .directive("palyer", [
    function() {
      return {
        restrict: "A",
        template:'<div class="player"><span ng-bind="text"></span></div>',
        link: function($scope, element, attr) {
          if (attr.toPlay) {
            $scope[attr.toPlay] = function(name) {
              $scope.text = name + " playing...";
            }
          }
        }
      };
    }
  ])
  .controller("playerController", ["$scope",
    function($scope) {
      $scope.clickPlay = function() {
        $scope.play('AR Song');
      };
    }
  ]);
.player{
  border:1px solid;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="playerController">
    <p>Click play button to play
      <p>
        <p palyer="" to-play="play"></p>
        <button ng-click="clickPlay()">Play</button>

  </div>
</div>


ओलिवर के उत्तर पर बिल्डिंग - आपको हमेशा निर्देशक के आंतरिक तरीकों तक पहुंचने की आवश्यकता नहीं होती है, और उन मामलों में आप शायद एक खाली वस्तु बनाना नहीं चाहते हैं और निर्देश को control एआरआर जोड़ना चाहते हैं ताकि इसे किसी त्रुटि को फेंकने से रोका जा सके ( cannot set property 'takeTablet' of undefined )।

आप भी निर्देश के भीतर अन्य स्थानों में विधि का उपयोग करना चाह सकते हैं।

मैं यह सुनिश्चित करने के लिए एक चेक scope.control कि scope.control मौजूद है, और प्रकट मॉड्यूल पैटर्न के समान तरीके से इसे सेट करें

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{control}}</div>',
    scope: {
      control: '='
    },
    link : function (scope, element, attrs) {
      var takenTablets = 0;
      var takeTablet = function() {
        takenTablets += 1;  
      }

      if (scope.control) {
        scope.control = {
          takeTablet: takeTablet
        };
      }
    }
  };
});

केवल स्कोप का उपयोग करें। निर्देशक फ़ंक्शन को बुलाए गए फ़ंक्शन को जोड़ने के लिए $ पैरेंट

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

एचटीएमएल में

<div ng-controller="MyCtrl">
    <mydirective></mydirective>
    <button ng-click="myfunction(parameter)">call()</button>
</div>

पृष्ठ नियंत्रक में निर्देशक नियंत्रक कैसे प्राप्त करें:

  1. डीओएम तत्व से निर्देश नियंत्रक के संदर्भ प्राप्त करने के लिए एक कस्टम निर्देश लिखें:

    angular.module('myApp')
        .directive('controller', controller);
    
    controller.$inject = ['$parse'];
    
    function controller($parse) {
        var directive = {
            restrict: 'A',
            link: linkFunction
        };
        return directive;
    
        function linkFunction(scope, el, attrs) {
            var directiveName = attrs.$normalize(el.prop("tagName").toLowerCase());
            var directiveController = el.controller(directiveName);
    
            var model = $parse(attrs.controller);
            model.assign(scope, directiveController);
        }
    }
    
  2. पेज नियंत्रक के एचटीएमएल में इसका इस्तेमाल करें:

    <my-directive controller="vm.myDirectiveController"></my-directive>
    
  3. पेज नियंत्रक में निर्देश नियंत्रक का प्रयोग करें:

    vm.myDirectiveController.callSomeMethod();
    

नोट: दिया गया समाधान केवल तत्व निर्देशकों के नियंत्रकों के लिए काम करता है (टैग नाम वांछित निर्देश का नाम पाने के लिए उपयोग किया जाता है)।


यदि आप अलग-अलग क्षेत्रों का उपयोग करना चाहते हैं तो आप नियंत्रक दायरे से एक चर के द्वि-दिशात्मक बाध्यकारी = का उपयोग कर नियंत्रण ऑब्जेक्ट पास कर सकते हैं। आप उसी नियंत्रण ऑब्जेक्ट वाले पृष्ठ पर उसी निर्देश के कई उदाहरण भी नियंत्रित कर सकते हैं।

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>


यह मानते हुए कि एक्शन बटन निर्देश के रूप में एक ही नियंत्रक $scope का उपयोग करता है, बस लिंक फ़ंक्शन के अंदर $scope पर फ़ंक्शन updateMap को परिभाषित करता है। जब कार्रवाई बटन क्लिक किया जाता है तो आपका नियंत्रक तब उस फ़ंक्शन को कॉल कर सकता है।

<div ng-controller="MyCtrl">
    <map></map>
    <button ng-click="updateMap()">call updateMap()</button>
</div>
app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }
});

fiddle

@ फ्लोरियनएफ की टिप्पणी के अनुसार, यदि निर्देश एक अलग दायरे का उपयोग करता है, तो चीजें अधिक जटिल होती हैं। इसे काम करने का एक तरीका यहां दिया गया है: map निर्देश में एक set-fn विशेषता जोड़ें जो नियंत्रक के साथ निर्देश फ़ंक्शन पंजीकृत करेगा:

<map set-fn="setDirectiveFn(theDirFn)"></map>
<button ng-click="directiveFn()">call directive function</button>
scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}
function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

fiddle


समाधान के नीचे उपयोगी होगा, जब आपके पास नियंत्रक (माता-पिता और निर्देश दोनों) अलग-अलग होते हैं (नियंत्रक के रूप में 'प्रारूप में

किसी को यह उपयोगी मिल सकता है,

निर्देश:

var directive = {
        link: link,
        restrict: 'E',
        replace: true,
        scope: {
            clearFilters: '='
        },
        templateUrl: "/temp.html",
        bindToController: true, 
        controller: ProjectCustomAttributesController,
        controllerAs: 'vmd'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.vmd.clearFilters = scope.vmd.SetFitlersToDefaultValue;
    }
}

निर्देश नियंत्रक:

function DirectiveController($location, dbConnection, uiUtility) {
  vmd.SetFitlersToDefaultValue = SetFitlersToDefaultValue;

function SetFitlersToDefaultValue() {
           //your logic
        }
}

HTML कोड :

      <Test-directive clear-filters="vm.ClearFilters"></Test-directive>
    <a class="pull-right" style="cursor: pointer" ng-click="vm.ClearFilters()"><u>Clear</u></a> 
//this button is from parent controller which will call directive controller function

परीक्षण आशा है कि यह किसी की मदद करता है।

मेरा सरल दृष्टिकोण (टैग को अपने मूल कोड के रूप में सोचें)

<html>
<div ng-click="myfuncion"> 
<my-dir callfunction="myfunction">
</html>

<directive "my-dir">
callfunction:"=callfunction"
link : function(scope,element,attr) {
scope.callfunction = function() {
 /// your code
}
}
</directive>






angularjs-directive