Bagaimana cara memanggil metode yang didefinisikan dalam arahan AngularJS?

Saya punya arahan, ini kode:

.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);  
        }
    }
})

Saya ingin updateMap()melakukan aksi pengguna. Tombol tindakan tidak ada pada arahan.

Apa cara terbaik untuk memanggil updateMap()dari pengontrol?

Jika Anda ingin menggunakan cakupan terisolasi, Anda bisa melewatkan objek kontrol menggunakan pengikatan dua arah =variabel dari lingkup pengontrol. Anda juga dapat mengontrol beberapa contoh direktif yang sama pada halaman dengan objek kontrol yang sama.

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>

Dengan asumsi bahwa tombol tindakan menggunakan pengontrol yang sama $scopedengan arahan, cukup tentukan fungsi updateMapdi $scopedalam fungsi tautan. Pengontrol Anda kemudian dapat memanggil fungsi itu ketika tombol aksi diklik.

<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

Sesuai komentar @ FlorianF, jika direktif menggunakan ruang lingkup yang terisolasi, segalanya menjadi lebih rumit. Inilah salah satu cara untuk membuatnya bekerja: tambahkan set-fnatribut ke mapdirektif yang akan mendaftarkan fungsi direktif dengan controller:

<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

Meskipun mungkin tergoda untuk mengekspos objek pada lingkup terisolasi dari direktif untuk memfasilitasi berkomunikasi dengannya, melakukan dapat menyebabkan kode "spaghetti" membingungkan, terutama jika Anda perlu untuk rantai komunikasi ini melalui beberapa level (pengontrol, untuk mengarahkan, ke arahan bersarang, dll.)

Kami awalnya menempuh jalan ini, tetapi setelah beberapa penelitian lebih lanjut menemukan bahwa itu lebih masuk akal dan menghasilkan kode yang lebih mudah dikelola dan dibaca untuk mengekspos peristiwa dan properti yang direktif akan digunakan untuk komunikasi melalui layanan kemudian menggunakan $ watch pada properti layanan di arahan atau kontrol lain yang perlu bereaksi terhadap perubahan tersebut untuk komunikasi.

Abstraksi ini bekerja sangat baik dengan kerangka injeksi ketergantungan AngularJS karena Anda dapat menyuntikkan layanan ke item apa pun yang perlu bereaksi terhadap peristiwa tersebut. Jika Anda melihat file Angular.js, Anda akan melihat bahwa arahan di sana juga menggunakan layanan dan $ menonton dengan cara ini, mereka tidak memaparkan peristiwa di ruang lingkup yang terisolasi.

Terakhir, dalam hal Anda perlu berkomunikasi antara arahan yang tergantung satu sama lain, saya akan merekomendasikan berbagi pengontrol antara arahan tersebut sebagai alat komunikasi.

Wiki AngularJS untuk Praktik Terbaik juga menyebutkan ini:

Hanya gunakan. $ Broadcast (),. $ Emit () dan. $ On () untuk acara atom Peristiwa yang relevan secara global di seluruh aplikasi (seperti autentikasi pengguna atau penutupan aplikasi). Jika Anda ingin acara khusus untuk modul, layanan, atau widget, Anda harus mempertimbangkan Layanan, Pengendali Arahan, atau Libs Pihak Ketiga

• $ scope. $ watch () harus menggantikan kebutuhan untuk acara
• Layanan injeksi dan metode panggilan secara langsung juga berguna untuk komunikasi langsung
• Arahan dapat berkomunikasi secara langsung satu sama lain melalui pengontrol direktif

Membangun berdasarkan jawaban Oliver - Anda mungkin tidak selalu perlu mengakses metode dalam direktif, dan dalam kasus-kasus itu Anda mungkin tidak ingin harus membuat objek kosong dan menambahkan controlattr ke direktif hanya untuk mencegahnya membuat kesalahan ( cannot set property 'takeTablet' of undefined).

Anda juga mungkin ingin menggunakan metode di tempat lain dalam arahan.

Saya akan menambahkan tanda centang untuk memastikan scope.controlada, dan mengatur metode untuk itu dengan cara yang mirip dengan pola modul mengungkapkan

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

Sejujurnya, saya tidak benar-benar yakin dengan jawaban apa pun di utas ini. Jadi, inilah solusi saya:

Pendekatan Directive Handler (Manajer)

Metode ini agnostik terhadap apakah arahan itu $scopeadalah yang dibagikan atau yang diisolasi

A factoryuntuk mendaftarkan instance direktif

angular.module('myModule').factory('MyDirectiveHandler', function() {
    var instance_map = {};
    var service = {
        registerDirective: registerDirective,
        getDirective: getDirective,
        deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
        instance_map[name] = ctrl;
    }

    function getDirective(name) {
        return instance_map[name];
    }

    function deregisterDirective(name) {
        instance_map[name] = null;
    }
});

Kode direktif, saya biasanya meletakkan semua logika yang tidak berurusan dengan DOM di dalam pengontrol direktif. Dan mendaftarkan instance controller di dalam handler kami

angular.module('myModule').directive('myDirective', function(MyDirectiveHandler) {
    var directive = {
        link: link,
        controller: controller
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        var name = $attrs.name;

        this.updateMap = function() {
            //some code
        };

        MyDirectiveHandler.registerDirective(name, this);

        $scope.$on('destroy', function() {
            MyDirectiveHandler.deregisterDirective(name);
        });
    }
})

kode templat

<div my-directive name="foo"></div>

Akses instance pengontrol menggunakan factory& jalankan metode terbuka untuk umum

angular.module('myModule').controller('MyController', function(MyDirectiveHandler, $scope) {
    $scope.someFn = function() {
        MyDirectiveHandler.get('foo').updateMap();
    };
});

Pendekatan sudut

Mengambil daun dari buku sudut tentang bagaimana mereka berurusan

<form name="my_form"></form>

menggunakan $ parse dan mendaftarkan controller pada $parentscope. Teknik ini tidak bekerja pada $scopearahan yang terisolasi .

angular.module('myModule').directive('myDirective', function($parse) {
    var directive = {
        link: link,
        controller: controller,
        scope: true
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        $parse($attrs.name).assign($scope.$parent, this);

        this.updateMap = function() {
            //some code
        };
    }
})

Akses di dalam pengontrol menggunakan $scope.foo

angular.module('myModule').controller('MyController', function($scope) {
    $scope.someFn = function() {
        $scope.foo.updateMap();
    };
});

Agak terlambat, tetapi ini adalah solusi dengan lingkup terisolasi dan "peristiwa" untuk memanggil fungsi dalam direktif. Solusi ini terinspirasi oleh pos SO ini oleh satchmorun dan menambahkan modul dan API.

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

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

Buat API untuk berkomunikasi dengan arahan. The addUpdateEvent menambahkan acara ke array acara dan memperbaruiPeta panggilan setiap fungsi acara.

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

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

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

(Mungkin Anda harus menambahkan fungsionalitas untuk menghapus acara.)

Dalam arahan set referensi ke MapAPI dan tambahkan $ scope.updateMap sebagai acara ketika MapApi.updateMap dipanggil.

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);

        }
    }
});

Di controller "main" tambahkan referensi ke MapApi dan panggil saja MapApi.updateMap () untuk memperbarui peta.

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

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

Anda dapat menentukan atribut DOM yang dapat digunakan untuk memungkinkan arahan untuk mendefinisikan fungsi pada lingkup induk. Lingkup induk kemudian dapat memanggil metode ini seperti yang lain. Di sini seorang plunker. Dan di bawah ini adalah kode yang relevan.

clearfn adalah atribut pada elemen direktif di mana ruang lingkup induk dapat melewati properti lingkup yang direktif kemudian dapat diatur ke fungsi yang memenuhi perilaku yang diinginkan.

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@*" 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>

Cukup gunakan lingkup. $ Parent untuk menghubungkan fungsi yang dipanggil ke fungsi direktif

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'   
      };
});

dalam HTML

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

Anda dapat memberi tahu nama metode untuk mengarahkan untuk menentukan mana yang ingin Anda panggil dari pengontrol tetapi tanpa ruang lingkup yang terpisah,

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>

DIUJI Semoga ini bisa membantu seseorang.

Pendekatan sederhana saya (Pikirkan tag sebagai kode asli Anda)

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

Mungkin ini bukan pilihan terbaik, tetapi Anda dapat melakukan angular.element("#element").isolateScope()atau $("#element").isolateScope()mengakses ruang lingkup dan / atau pengontrol arahan Anda.

Cara mendapatkan pengontrol direktif dalam pengontrol halaman:

1. tulis custom directive untuk mendapatkan referensi ke directive controller dari elemen DOM:

   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. gunakan di html pengontrol halaman:

   <my-directive controller="vm.myDirectiveController"></my-directive>

3. Gunakan pengontrol direktif di pengontrol halaman:

   vm.myDirectiveController.callSomeMethod();

Catatan: solusi yang diberikan hanya berfungsi untuk pengontrol arahan elemen (nama tag digunakan untuk mendapatkan nama arahan yang diinginkan).

Solusi di bawah ini akan berguna ketika, Anda memiliki pengontrol (baik induk maupun direktif (terisolasi)) dalam format 'controller As'

seseorang mungkin menganggap ini berguna,

pengarahan :

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

Pengendali direktif:

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

function SetFitlersToDefaultValue() {
           //your logic
        }
}

kode 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