একটি AngularJS নির্দেশিত সংজ্ঞা একটি পদ্ধতি কল কিভাবে?




angularjs-directive (9)

অলিভারের উত্তরের উপর বিল্ডিং - আপনাকে সর্বদা নির্দেশের অভ্যন্তরীণ পদ্ধতিগুলি অ্যাক্সেস করতে হবে না এবং সেই ক্ষেত্রে আপনি সম্ভবত একটি ফাঁকা বস্তু তৈরি করতে চান না এবং এটি একটি ত্রুটি নিক্ষেপ করতে বাধা দেওয়ার জন্য নির্দেশের control যোগ করতে চান না ( cannot set property 'takeTablet' of undefined )।

আপনি নির্দেশের মধ্যে অন্যান্য স্থানে পদ্ধতিটি ব্যবহার করতে পারেন।

আমি 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
        };
      }
    }
  };
});

আমি একটি নির্দেশ আছে, এখানে কোড:

.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() কল করার সেরা উপায় কি?


অ্যাকশন বোতামটি নির্দেশক হিসাবে একই নিয়ামক $scope ব্যবহার করে updateMap করে, লিঙ্ক ফাংশনের অভ্যন্তরে $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


আপনি কন্ট্রোলার থেকে কল করতে চান তা সংজ্ঞায়িত করার জন্য পদ্ধতির নামটি বলতে পারেন কিন্তু ব্যবধান ছাড়াই,

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>


একটু দেরী, কিন্তু এই বিচ্ছিন্ন সুযোগ এবং "ঘটনা" নির্দেশের সাথে একটি ফাংশন কল করতে একটি সমাধান। এই সমাধানটি satchmorun দ্বারা এই SO পোস্ট দ্বারা satchmorun এবং একটি মডিউল এবং একটি API যোগ করে।

//Create module
var MapModule = angular.module('MapModule', []);

//Load dependency dynamically
angular.module('app').requires.push('MapModule');

নির্দেশিকা সঙ্গে যোগাযোগ করার জন্য একটি API তৈরি করুন। AddUpdateEvent ইভেন্ট অ্যারেতে একটি ইভেন্ট যোগ করে এবং আপডেট ম্যাপ প্রতিটি ইভেন্ট ফাংশন কল করে।

MapModule.factory('MapApi', function () {
    return {
        events: [],

        addUpdateEvent: function (func) {
            this.events.push(func);
        },

        updateMap: function () {
            this.events.forEach(function (func) {
                func.call();
            });
        }
    }
});

(সম্ভবত আপনি ইভেন্ট মুছে ফেলার জন্য কার্যকারিতা যোগ করতে হবে।)

নির্দেশিকাতে MapAPI এর একটি রেফারেন্স সেট করুন এবং MapApi.updateMap নামে যখন একটি ইভেন্ট হিসাবে $ scope.updateMap যুক্ত করুন।

app.directive('map', function () {
    return {
        restrict: 'E', 
        scope: {}, 
        templateUrl: '....',
        controller: function ($scope, $http, $attrs, MapApi) {

            $scope.api = MapApi;

            $scope.updateMap = function () {
                //Update the map 
            };

            //Add event
            $scope.api.addUpdateEvent($scope.updateMap);

        }
    }
});

"প্রধান" কন্ট্রোলারের মধ্যে MapApi এ একটি রেফারেন্স যুক্ত করুন এবং মানচিত্র আপডেট করতে মানাপেপি.আপডেটআপম () কে কল করুন।

app.controller('mainController', function ($scope, MapApi) {

    $scope.updateMapButtonClick = function() {
        MapApi.updateMap();    
    };
}

মাত্র সুযোগ ব্যবহার করুন। অভিভাবক ফাংশন বলা ফাংশন সহযোগী $ অভিভাবক

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>

যদি আপনি বিচ্ছিন্ন স্কোপগুলি ব্যবহার করতে চান তবে আপনি কন্ট্রোলার সুযোগ থেকে একটি পরিবর্তনশীলের দ্বি-নির্দেশক বাইন্ডিং = ব্যবহার করে একটি নিয়ন্ত্রণ বস্তু পাস করতে পারেন। একই কন্ট্রোল অবজেক্টের সাথে একই পৃষ্ঠার একই দিকনির্দেশের ক্ষেত্রে আপনি নিয়ন্ত্রণ করতে পারেন।

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>


সমাধান নীচে কার্যকর হবে, যখন আপনি নিয়ামক (উভয় অভিভাবক এবং নির্দেশিকা (বিচ্ছিন্ন)) 'নিয়ামক হিসাবে' ফর্ম্যাটে আছেন

কেউ এই দরকারী খুঁজে পেতে পারে,

নির্দেশনা:

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
        }
}

এইচটিএমএল কোড:

      <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

সম্ভবত এটি সেরা পছন্দ নয়, তবে আপনি angular.element("#element").isolateScope() অথবা $("#element").isolateScope() স্কোপ এবং / অথবা আপনার নির্দেশকের নিয়ামক অ্যাক্সেস করতে পারেন।


পরীক্ষিত কেউ এই সাহায্য করে।

আমার সহজ পদ্ধতি (ট্যাগগুলি আপনার আসল কোড হিসাবে মনে করুন)

<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